響應式網頁開發(fā)注意事項
2021-05-24 分類： 網站建設
由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
具體說：
一．CSS代碼不能指定像素寬度：
width:xxx px;
只能指定百分比寬度：
width: xx%;
或者：width:auto;
這里開發(fā)是指一個網頁不僅能用在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）
"流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。
另外，絕對定位（position:absolute）的使用，也要非常小心。
四. 圖片的自適應（fluid image）
除了布局和文本，"自適應網頁設計"還必須實現(xiàn)圖片的自動縮放。
這只要一行CSS代碼：
img { max-width:100%;}
這行代碼對于大多數(shù)嵌入網頁的視頻也有效，所以可以寫成：
img, object {max-width: 100%;}
老版本的IE不支持max-width，所以只好寫成：
img { width: 100%; }
五．
iPhone的設計標準，狀態(tài)欄和導航欄的獨立像素高度分別為40px和88px。
由于Android系統(tǒng)可以更改狀態(tài)欄和導航欄的高度，這里可以取默認值為48px和100px（這些尺寸網上均可查）。
那么就會把網頁內容往下擠，進入盲區(qū)（根據不同的布局方式可能擠出視口，即可視區(qū)域之下，）。取這兩個系統(tǒng)者的大值為148（48+100）,如下圖5，設計稿要盡量保證單頁下面沒有重要內容。
那么在所有屏幕大小上把重要內容顯示完全，就要注意市面上存在的小尺寸手機屏幕，現(xiàn)在絕大部分智能手機分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要內容放在上圖5中的盲區(qū)之上即可。計算后的最安全高度為812（960-148=812）。
在此總結，一般情況下，以現(xiàn)有市場上流行的移動智能手機，單頁翻轉（非延伸向下的長頁面）設計稿尺寸為640×1136，在高度為812處設置一條安全線（參考線），將重要的內容布局在這條安全線之上。
一般情況下，H5頁面設計稿做成640x1136px是最為穩(wěn)妥的尺寸，在812px高度處增加一條安全線，重要內容在此線之上（網上有些文章說安全線是960px處，個人認為不太準確）。既保證了在移動設備上顯示清晰，也保證了素材的最小尺寸。
本文名稱：響應式網頁開發(fā)注意事項
文章轉載：http://www.aaarwkj.com/news16/114816.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供移動網站建設、網站維護、網站營銷、網站改版、網站策劃、定制開發(fā)
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容
- 企業(yè)網站需求文檔-精簡版 2021-05-24
- 下一代超級互聯(lián)網將是5G+AI+LOT創(chuàng)造的 2021-05-23
- 沒有好用的網站？那是你還沒看到這些！ 2021-05-23
- 關于電商設計的那些事兒，此文講的最全面！ 2021-05-23
- 可以做外地的客戶網站嗎？怎么做？ 2021-05-23
- 制作企業(yè)網站說明 2021-05-23
- 網站如何上傳其它文件并下載 2021-05-23
- 創(chuàng)新互聯(lián)帶你了解工業(yè)互聯(lián)網+5G的真正“力量” 2021-05-23
- app應用的商業(yè)推廣、app推廣成本及生產內容幫助商家更好的運營 2021-05-23
- 轉化率低？影響競價轉化率的幾個因素！ 2021-05-23
- 中小微型企業(yè)小程序占比達80% 2021-05-23
- 在網建中我們應遵循哪些規(guī)律？ 2021-05-23
- 資深建站小編為您深度刨析建站圖標的三點重要元素 2021-05-23
- 網站開發(fā)應該要不斷的提高網站的實用性 2021-05-23
- SEO優(yōu)化教程如何高質量洗稿 2021-05-23
- 新頂級域名，盤它！ 2021-05-23
- 網站沒有SSL證書，到底影響什么？ 2021-05-23
- 數(shù)字化時代 如何應對數(shù)據安全挑戰(zhàn) 2021-05-23
- 關于光纖網絡一些基本問題和解決對策 2021-05-23