響應式設計簡介
作者：龍 時(shí)間：2018-07-25 浏覽：
網上的(de)教程好複雜(zá)，我寫一個(gè)簡版的(de)。
簡單說呢(ne)就針對(duì)不同的(de)屏幕分(fēn)辨率應用(yòng)不同的(de)CSS樣式。比如在電腦(nǎo)、Pad設備上，屏幕比較寬，就可(kě)以一行放2個(gè)Div。
到了(le)手機上，或者Pad豎著(zhe)拿的(de)的(de)時(shí)候，一行就隻放1個(gè)Div。
這(zhè)裏有2個(gè)關鍵點：
一是如何在不修改Dom結構的(de)前提下(xià)調整布局。
二是如何判斷屏幕分(fēn)辨率并應用(yòng)對(duì)應的(de)CSS。
以上兩點都應該不依賴與JS。
實現第一點依靠的(de)是流式布局。就是所有參與布局的(de)DIV都用(yòng)float:left，寬度都用(yòng)百分(fēn)比表示。比如下(xià)圖，黃(huáng)色部分(fēn)的(de)寬度是60%，橘色寬度是40%。
如果将黃(huáng)色和(hé)橘色的(de)寬度都width=100%,那麽從1行變成2行了(le)，如下(xià)圖。從而實現不修改Dom實現布局變化(huà)。
那麽如何不使用(yòng)JS而實現動态調整CSS樣式就是第二個(gè)關鍵點。
HTML5中提供了(le)一種新的(de)CSS語法——@media，學名是Media Query，可(kě)以爲不同的(de)分(fēn)辨率設定不同的(de)樣式。
|
|
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
#head { width: 100%; }
#main { width: 100%; }
#foot { width: 100%; }
#left { width: 100%; }
#right { width: 100%; }
}
|
上面這(zhè)段代碼的(de)含義就是當屏幕寬度小于等于320像素時(shí)應用(yòng)大(dà)括号中的(de)樣式。下(xià)圖是在CSS生效時(shí)在浏覽器中的(de)效果：
@media還(hái)有一些更複雜(zá)的(de)用(yòng)法，比如：
|
|
/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
|
這(zhè)段語句就是針對(duì)iPhone橫屏的(de)。即，浏覽器寬度在321-480像素之間，且方向是“橫向”時(shí)生效。
不過自從Retina這(zhè)中妖豔的(de)屏幕推出，分(fēn)辨率已經不能代表世界的(de)真相了(le)。小小的(de)Note3的(de)分(fēn)辨率比一些17“顯示的(de)分(fēn)辨率還(hái)高(gāo)。
所以還(hái)有必要判斷一下(xià)設備的(de)像素密度-device-pixel-ratio。
|
|
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
|
比如上面的(de)語句就是判斷終端的(de)像素比是2的(de)話(huà)，所渲染的(de)樣式。可(kě)以适用(yòng)于iPhone4，iPhone5等設備。
除了(le)上述兩點，還(hái)需要在頁面上增加一個(gè)viewport的(de)meta标簽，否則在手機上可(kě)能會有頁面自動縮放的(de)情況。例如：
|
|
<meta name="viewport" content="width=device-width; initial-scale=1.0">
|
總結一下(xià)：響應式布局有三個(gè)關鍵點：
1、流式布局 Liquid Layout
2、Media Query
3、viewport
具體細節就請大(dà)家自己研究相關的(de)語法了(le)。
Media Query的(de)語法比較複雜(zá)，這(zhè)裏個(gè)大(dà)家推薦一個(gè)工具，可(kě)以方便的(de)設計布局，并可(kě)以針對(duì)各種設備自動生成Media Query的(de)語句：
