自適網頁RWD開發心得

最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎?

是的！最近我在進行部落格的版面小修改！
主要訴求是要將版面改版成具有專業感、清楚、易讀，
然後呀，本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!!

其實自適網頁說穿了，只是用多組的CSS，可以在不同瀏覽環境下切換畫面的CSS，
這可以讓同一個網頁在手機以及電腦上，呈現不一樣的樣子。

RWD一般最常見是使用media queries，利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。

我的開發心得

那這次的改版過程中，下面幾點是我覺得在開發RWD時要去注意的

1. 若有需要使用JS去做網頁動態，不要將CSS直接在JS裡面加，例如
   
   $(".content").css("display","none");//js

   1	$(".content").css("display","none");//js

   
   類似上面的這種的作法都要通通避免，JS一定要避免掉所有和版面有關的設定。
   像上面這種寫法，應改成：
   
   $(".content").addClass("display-none");//js

   1	$(".content").addClass("display-none");//js

   
   
   .display-none{display:none;}/*CSS*/

   1	.display-none{display:none;}/*CSS*/

   
   這樣可以避免在切換為不同顯示方式時彼此互鄉干擾到。
2. CSS選擇器的優先順序：
   因為在套用時，會有共通的、在某些解析度才要使用的CSS設定。
   假如當今天總共有四種不同瀏覽裝置有四種不同版面，其中想在某一種特別的裝置上套用一系列不同的CSS(只是改字體什麼等)。會需要更清楚的了解各種選擇方法在執行時的優先順序，才能用不同的選擇器去覆蓋原有設定。
   這邊有關於選擇器優先順序的詳細說明：如何撰寫有效率的CSS選擇器(CSS Selector)
3. HTML格式架構：
   因為要應付多種的CSS套版，HTML的格式設計就很重要，應要能夠清楚表達各元素之間的子從關係，並且符合W3C的規範，這樣子在換CSS時才可以順利在不更改HTML的狀況下去更動顯示方式。

Media Queries設定方式

1. 直接分成不同的CSS檔案，在HTML載入時宣告此CSS作用的對象
   
   <link href="/style.css" rel="stylesheet" media="all and (color)" type="text/css" /> <!--?xml-stylesheet media="all and (color)" rel="stylesheet" href="example.css" ?-->

   1 2 3

   <link href="/style.css" rel="stylesheet" media="all and (color)" type="text/css" />   <!--?xml-stylesheet media="all and (color)" rel="stylesheet" href="example.css" ?-->

2. 在CSS檔裡面設定作用對象
   
   @import url(/style.css) all and (color); @media all and (color) { ⋮ one or more rule sets… }

   1 2 3 4 5

   @import url(/style.css) all and (color);   @media all and (color) {   ⋮ one or more rule sets… }

條件的用法

@media [media type] and [(media feature)]

例：如果視窗最小寬度為500px，就套用這些CSS
@media screen and (min-width:500px) {.....}

例：如果視窗為直立，就套用這些CSS
@media screen and (orientation: portrait) {.....}

例：如果視窗在400px和700px之間(兩者需同時符合)，就套用這些CSS
@media screen and (min-width: 400px) and (max-width: 700px)

例：如果是彩色螢幕或彩色投影機兩者之一(兩者符合一種即可)，就套用這些CSS
@media screen and (color), projection and (color) {.....}

屬性和值

1. media type類型：
   
   比較要注意的是，handheld這個值其實並沒有辦法有效的判別是否為手持設備，現在會讀handheld的手機瀏覽器有：OpenWave, Nokia lite-web browsers, Netfront, Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9,Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x。所以若是要判別是否是使用iPhone或Android手機，可以使用下面的判斷式：
   
   // target mobile devices @media only screen and (max-device-width: 480px) { body { max-width: 100%; } } // recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) { // CSS goes here } // should technically achieve a similar result to the above query, // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) @media only screen and (min-resolution: 300dpi) { // CSS goes here }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   // target mobile devices @media only screen and (max-device-width: 480px) {     body { max-width: 100%; } }   // recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) {     // CSS goes here }   // should technically achieve a similar result to the above query, // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) @media only screen and (min-resolution: 300dpi) {     // CSS goes here }

2. media features
   * (max-或min-)width:[數字]
   * (max-或min-)height:[數字]
   * (max-或min-)device-width:[數字]
   * (max-或min-)device-height:[數字]
   * orientation:portrait 或 landscape
   * aspect-ratio:[比值]
   * (max-或min-)device-aspect-ratio:[比值]
   * color
   * color-index
   * monochrome
   * (max-或min-)resolution:[數字]dpi
   * scan(只對tv)
   * grid
3. 在JS裡取得螢幕的真實寬度：
   
   function getWindowWidth() { var windowWidth = 0; if (typeof(window.innerWidth) == 'number') { windowWidth = window.innerWidth; } else { if (document.documentElement &amp;&amp; document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; } else { if (document.body &amp;&amp; document.body.clientWidth) { windowWidth = document.body.clientWidth; } } } return windowWidth; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   function getWindowWidth() { var windowWidth = 0; if (typeof(window.innerWidth) == 'number') { windowWidth = window.innerWidth; } else { if (document.documentElement && document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; } else { if (document.body && document.body.clientWidth) { windowWidth = document.body.clientWidth; } } } return windowWidth; }

參考資料

• Mobile Web 前端技術筆記(二)
• 如何撰寫有效率的CSS選擇器(CSS Selector)