響應式布局簡說

2021-07-29 13:23:44 字數 2775 閱讀 3010

簡單說呢就針對不同的螢幕解析度應用不同的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 onlyscreenand (max-width:320px)

#main

#foot

#left

#right

}

上面這段**的含義就是當螢幕寬度小於等於320畫素時應用大括號中的樣式。下圖是在css生效時在瀏覽器中的效果:

@media還有一些更複雜的用法,比如:

css1

2

/* phone landscape (480px) */

@media onlyscreenand (min-width:321px) and (max-width:480px) and (orientation:landscape) {

這段語句就是針對iphone橫屏的。即,瀏覽器寬度在321-480畫素之間,且方向是「橫向」時生效。

不過自從retina這中妖豔的螢幕推出,解析度已經不能代表世界的真相了。小小的note3的解析度比一些17「顯示的解析度還高。

所以還有必要判斷一下裝置的畫素密度-device-pixel-ratio。

css1

@media onlyscreenand (-moz-min-device-pixel-ratio:2), onlyscreenand (-o-min-device-pixel-ratio:2/1), onlyscreenand (-webkit-min-device-pixel-ratio:2), onlyscreenand (min-device-pixel-ratio:2)

比如上面的語句就是判斷終端的畫素比是2的話,所渲染的樣式。可以適用於iphone4,iphone5等裝置。

除了上述兩點,還需要在頁面上增加乙個viewport的meta標籤,否則在手機上可能會有頁面自動縮放的情況。例如:

html

1

<metaname="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...