響應式網頁開發注意事項

由于網頁會根據螢幕寬度調整布局，是以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。   具體說： 一．CSS代碼不能指定像素寬度：   width:xxx px;   隻能指定百分比寬度：   width: xx%;   或者：width:auto;     這裡開發是指一個網頁不僅能用在pc上，也能同時用于移動端，但是對于webapp這種還是需要單獨做一個webapp使用的頁面。   二. 相對大小的字型   字型也不能使用絕對大小（px），而隻能使用相對大小（em）。 　　body { 　　　　font: normal 100%Helvetica, Arial, sans-serif; 　　} 上面的代碼指定，字型大小是頁面預設大小的100%，即16像素。 　　h1 { 　　　　font-size: 1.5em; 　　} 然後，h1的大小是預設大小的1.5倍，即24像素（24/16=1.5）。 　　small { 　　　　font-size: 0.875em; 　　} small元素的大小是預設大小的0.875倍，即14像素（14/16=0.875）。     三. 流動布局（fluid grid） "流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。 　　.main { 　　　　float: right; 　　　　width: 70%; 　　} 　　.leftBar { 　　　　float: left; 　　　　width: 25%; 　　} float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水準方向overflow（溢出），避免了水準滾動條的出現。 另外，絕對定位（position:absolute）的使用，也要非常小心。     四. 圖檔的自适應（fluid image） 除了布局和文本，"自适應網頁設計"還必須實作圖檔的自動縮放。 這隻要一行CSS代碼： 　　img { max-width:100%;} 這行代碼對于大多數嵌入網頁的視訊也有效，是以可以寫成： 　　img, object {max-width: 100%;} 老版本的IE不支援max-width，是以隻好寫成： 　　img { width: 100%; }     五．     iPhone的設計标準，狀态欄和導航欄的獨立像素高度分别為40px和88px。     由于Android系統可以更改狀态欄和導航欄的高度，這裡可以取預設值為48px和100px（這些尺寸網上均可查）。 那麼就會把網頁内容往下擠，進入盲區（根據不同的布局方式可能擠出視口，即可視區域之下，）。取這兩個系統者的最大值為148（48+100）,如下圖5，設計稿要盡量保證單頁下面沒有重要内容。       那麼在所有螢幕大小上把重要内容顯示完全，就要注意市面上存在的小尺寸手機螢幕，現在絕大部分智能手機分辨率都在640x960px（iPhone4分辨率）之上，是以隻要把重要内容放在上圖5中的盲區之上即可。計算後的最安全高度為812（960-148=812）。     在此總結，一般情況下，以現有市場上流行的移動智能手機，單頁翻轉（非延伸向下的長頁面）設計稿尺寸為640×1136，在高度為812處設定一條安全線（參考線），将重要的内容布局在這條安全線之上。     一般情況下，H5頁面設計稿做成640x1136px是最為穩妥的尺寸，在812px高度處增加一條安全線，重要内容在此線之上（網上有些文章說安全線是960px處，個人認為不太準确）。既保證了在移動裝置上顯示清晰，也保證了素材的最小尺寸。