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.88yangsc.com