簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦、pad裝置上,螢幕比較寬,就可以一行放2個div。
到了手機上,或者pad豎著拿的的時候,一行就只放1個div。
這裡有2個關鍵點:
一是如何在不修改dom結構的前提下調整布局。
二是如何判斷螢幕解析度並應用對應的css。
以上兩點都應該不依賴與js。
實現第一點依靠的是流式布局。就是所有參與布局的div都用float:left,寬度都用百分比表示。比如下圖,黃色部分的寬度是60%,橘色寬度是40%。
如果將黃色和橘色的寬度都width=100%,那麼從1行變成2行了,如下圖。從而實現不修改dom實現布局變化。
那麼如何不使用js而實現動態調整css樣式就是第二個關鍵點。
html5中提供了一種新的css語法——@media,學名是media query,可以為不同的解析度設定不同的樣式。
css1
2
3
4
5
6
7
8
/* phone portrait (320px) */
@media only
screen
and (
max-width
:
320px
)
#main
#foot
#
left
#
right
}
上面這段**的含義就是當螢幕寬度小於等於320畫素時應用大括號中的樣式。下圖是在css生效時在瀏覽器中的效果:
@media還有一些更複雜的用法,比如:
css1
2
/* phone landscape (480px) */
@media only
screen
and (
min-width
:
321px
) and (
max-width
:
480px
) and (orientation:
landscape
) {
這段語句就是針對iphone橫屏的。即,瀏覽器寬度在321-480畫素之間,且方向是「橫向」時生效。
不過自從retina這中妖豔的螢幕推出,解析度已經不能代表世界的真相了。小小的note3的解析度比一些17「顯示的解析度還高。
所以還有必要判斷一下裝置的畫素密度-device-pixel-ratio。
css1
@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
)
比如上面的語句就是判斷終端的畫素比是2的話,所渲染的樣式。可以適用於iphone4,iphone5等裝置。
除了上述兩點,還需要在頁面上增加乙個viewport的meta標籤,否則在手機上可能會有頁面自動縮放的情況。例如:
html
1
<
meta
name
=
"viewport"
content
=
"width=device-width; initial-scale=1.0"
>
總結一下:響應式布局有三個關鍵點:
1、流式布局 liquid layout
2、media query
3、viewport
具體細節就請大家自己研究相關的語法了。
響應式布局簡說
簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦 pad裝置上,螢幕比較寬,就可以一行放2個div。到了手機上,或者pad豎著拿的的時候,一行就只放1個div。這裡有2個關鍵點 一是如何在不修改dom結構的前提下調整布局。二是如何判斷螢幕解析度並應用對應的css。以上兩點都應該不依賴與...
響應式布局簡說
簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦 pad裝置上,螢幕比較寬,就可以一行放2個div。到了手機上,或者pad豎著拿的的時候,一行就只放1個div。這裡有2個關鍵點 一是如何在不修改dom結構的前提下調整布局。二是如何判斷螢幕解析度並應用對應的css。以上兩點都應該不依賴與...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計,對於pc設計乙個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少,網頁布局就按照當時寫 的布局來布置 對於移動裝置,單獨設計乙個布局,使用不同的網域名稱如wap...