最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎? 是的！最近我在進行部落格的版面小修改！ 主要訴求是要將版面改版成具有專業感、清楚、易讀， 然後呀，本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!! 其實自適網頁說穿了，只是用多組的CSS，可以在不同瀏覽環境下切換畫面的CSS， 這可以讓同一個網頁在手機以及電腦上，呈現不一樣的樣子。 RWD一般最常見是使用media queries，利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。 我的開發心得 那這次的改版過程中，下面幾點是我覺得在開發RWD時要去注意的 若有需要使用JS去做網頁動態，不要將CSS直接在JS裡面加，例如 類似上面的這種的作法都要通通避免，JS一定要避免掉所有和版面有關的設定。 像上面這種寫法，應改成： 這樣可以避免在切換為不同顯示方式時彼此互鄉干擾到。 CSS選擇器的優先順序： 因為在套用時，會有共通的、在某些解析度才要使用的CSS設定。 假如當今天總共有四種不同瀏覽裝置有四種不同版面，其中想在某一種特別的裝置上套用一系列不同的CSS(只是改字體什麼等)。會需要更清楚的了解各種選擇方法在執行時的優先順序，才能用不同的選擇器去覆蓋原有設定。 這邊有關於選擇器優先順序的詳細說明：如何撰寫有效率的CSS選擇器(CSS Selector) HTML格式架構： 因為要應付多種的CSS套版，HTML的格式設計就很重要，應要能夠清楚表達各元素之間的子從關係，並且符合W3C的規範，這樣子在換CSS時才可以順利在不更改HTML的狀況下去更動顯示方式。 Media Queries設定方式…