2014-10-23 藍(lán)藍(lán)設(shè)計(jì)的小編
 網(wǎng)上關(guān)于響應(yīng)式設(shè)計(jì)的教程好復(fù)雜，我寫一個(gè)簡(jiǎn)版的。 簡(jiǎn)單說(shuō)呢就針對(duì)不同的屏幕分辨率應(yīng)用不同的CSS樣式。比如在電腦、Pad設(shè)備上，屏幕比較寬，就可以一行放2個(gè)Div。到了手機(jī)上，或者Pad豎著拿的的時(shí)候，一行就只放1個(gè)Div。 這里有2個(gè)關(guān)鍵點(diǎn)：
以上兩點(diǎn)都應(yīng)該不依賴與JS。 實(shí)現(xiàn)第一點(diǎn)依靠的是流式布局。就是所有參與布局的DIV都用float:left，寬度都用百分比表示。比如下圖，黃色部分的寬度是60%，橘色寬度是40%。  如果將黃色和橘色的寬度都width=100%,那么從1行變成2行了，如下圖。從而實(shí)現(xiàn)不修改Dom實(shí)現(xiàn)布局變化。  那么如何不使用JS而實(shí)現(xiàn)動(dòng)態(tài)調(diào)整CSS樣式就是第二個(gè)關(guān)鍵點(diǎn)。 HTML5中提供了一種新的CSS語(yǔ)法——@media，學(xué)名是Media Query，可以為不同的分辨率設(shè)定不同的樣式。 CSS
下圖是在CSS生效時(shí)在瀏覽器中的效果：  @media還有一些更復(fù)雜的用法，比如： CSS
不過(guò)自從Retina這中妖艷的屏幕推出，分辨率已經(jīng)不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。 所以還有必要判斷一下設(shè)備的像素密度-device-pixel-ratio。 CSS
除了上述兩點(diǎn)，還需要在頁(yè)面上增加一個(gè)viewport的meta標(biāo)簽，否則在手機(jī)上可能會(huì)有頁(yè)面自動(dòng)縮放的情況。例如： HTML
總結(jié)一下：響應(yīng)式布局有三個(gè)關(guān)鍵點(diǎn)：
具體細(xì)節(jié)就請(qǐng)大家自己研究相關(guān)的語(yǔ)法了。 Media Query的語(yǔ)法比較復(fù)雜，這里個(gè)大家推薦一個(gè)工具，可以方便的設(shè)計(jì)布局，并可以針對(duì)各種設(shè)備自動(dòng)生成Media Query的語(yǔ)句： http://www.responsivewebcss.com/    |
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com