總是聽別人說響應(yīng)式布局，原來這么簡單

總聽別人說響應(yīng)式布局，覺得是一個(gè)很高大上的東西，近日做的一個(gè)項(xiàng)目需要適配不同的屏幕尺寸，于是就簡單研究了一下 Web響應(yīng)式布局，其實(shí)原理很簡單，下面就簡單整理了一下分享給大家。

什么是響應(yīng)式布局

如圖就是響應(yīng)式布局的體現(xiàn)，簡單的說響應(yīng)式布局就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念隨著移動(dòng)設(shè)備的興起而深入人心。 比如 頭條他做的就不是響應(yīng)式布局，他通過實(shí)時(shí)檢測設(shè)備信息，在 www.toutiao.com和 m.toutiao.com兩個(gè)網(wǎng)站之間切換。而最近比較火的開發(fā)者社區(qū) segmentfault.com就是響應(yīng)式布局，頁面的布局會(huì)會(huì)隨著你拖動(dòng)瀏覽器窗口大小變化而變化。響應(yīng)式布局沒有絕對的話好與壞，需要根據(jù)網(wǎng)站的性質(zhì)來確定，比如 toutiao的頁面元素非常多，頁面需要包括所有屏幕尺寸的樣式顯示不是很好操作，然而 segmentfault頁面元素較少，反而放在一起方便維護(hù)。

如何快速實(shí)現(xiàn) web響應(yīng)式布局

我們通過一個(gè)例子來具體說明，首先使用 @media關(guān)鍵字為不同的屏幕尺寸設(shè)置不同樣式，關(guān)于 @media我們下文有更詳細(xì)的介紹

代碼片段：

1. type="text/css">

2. @mediaonly screenand(min-width:480px){

3. .col-sm-6,.col-sm-12{

4. float:left;

5. }

6. .col-sm-12{

7. width:100%;

8. }

9. .col-sm-6{

10. width:50%;

11. }

12. }

13. @mediaonly screenand(min-width:768px){

14. .col-md-6,.col-md-12{

15. float:left;

16. }

17. .col-md-12{

18. width:100%;

19. }

20. .col-md-6{

21. width:50%;

22. }

23. }

25. class="container">

26. class="col-md-12 col-sm-12 row">

27. class="col-md-6 col-sm-12 col-1 col">

28. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

29. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

30. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

31. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

32. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

33. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

35. class="col-md-6 col-sm-12 col-2 col">

36. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

37. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

38. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

39. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

40. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

41. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

我們簡單解釋一下上述代碼片段 min-width指的是當(dāng)屏幕尺寸大于當(dāng)前值的時(shí)候樣式生效。 外層的 div包裹內(nèi)層的兩個(gè) div。 col-md-6col-sm-12當(dāng)屏幕尺寸大于 768px的時(shí)候子 div寬度是父 div的一半，所以是并排。當(dāng)屏幕尺寸大于 480px的時(shí)候子 div寬度和父 div的寬度一樣。下圖為不同尺寸下的效果圖。

768px

注意觀察的同學(xué)又發(fā)現(xiàn)問題了，圖二沒有辦法看啊，太小了吧。是的，我們的響應(yīng)式還沒有做完，這個(gè)時(shí)候我們在 head里面添加如下一行代碼再試試？那么問題來了，圖一尺寸大于 768px不假，但是也大于 480px啊，那么怎么就按照 768px的尺寸排布了呢？這里就涉及到了 CSS優(yōu)先級： CSS 的基本優(yōu)先級如下 （外部樣式）Externalstyle sheet<（內(nèi)部樣式）Internalstyle sheet<（內(nèi)聯(lián)樣式）Inlinestyle如果優(yōu)先級一樣便有一個(gè)覆蓋原則，后面的覆蓋前面的，于是如例，當(dāng)屏幕尺寸慢慢變大到 768px的時(shí)候，后者遍生效了。

1. name="viewport"

2. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

如圖神奇的一幕出現(xiàn)了：

width=device-width: 表示此寬度不依賴于原始象素(px)，而依賴于屏幕的寬度.這樣我們就大功告成了.如需要下載源碼請點(diǎn)擊，在線查看請點(diǎn)擊。想知道為什么 meta有這么大作用請翻看下文。

Meta ViewPort 是什么

手機(jī)瀏覽器是把頁面放在一個(gè)虛擬的“窗口”( viewport)中，通常這個(gè)虛擬的“窗口”( viewport)比屏幕寬，默認(rèn)是把網(wǎng)頁擠到一個(gè)很小窗口以便全部預(yù)覽，這樣也不會(huì)破壞沒有適配手機(jī)布局的網(wǎng)頁。移動(dòng)版的 Safari 瀏覽器最新引進(jìn)了 viewport 這個(gè) meta tag，讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放，其他手機(jī)瀏覽器也逐步支持。我們?nèi)绻隽耸謾C(jī)屏幕尺寸的適配就可以手動(dòng)調(diào)整 viewport，這樣就可以把網(wǎng)頁內(nèi)容和手機(jī)布局合理的展示給用戶。下面是具體參數(shù)的說明：

Media Queries 詳解

中文叫做媒體查詢，它包含一個(gè)媒體類型(media type)和至少一個(gè)表達(dá)式，用媒體特性限制樣式表的作用范圍。下面我們直接通過例子對相對的關(guān)鍵字進(jìn)行分析：

only

用于向早期瀏覽器隱藏媒體查詢，比如IE如果不支持的話直接忽略當(dāng)前定義的樣式。和其他表達(dá)式一起用需要 and

@mediaonly screenand(min-width:400px)

screen

screen是一種 媒體類型，例中的 screen意思是僅支持彩色電腦顯示器。其他屬性如下： all：適用與所有設(shè)備 print：paged material and documents viewed on screen in print previe mode. screen: 彩色電腦顯示器 speech：intended for speech synthesizers

and

and是一種 操作符，表示被鏈接的表達(dá)式不許同時(shí)滿足，其他表達(dá)式如下： and：所有條件必須滿足 ,：只要滿足一種條件即可 not：條件的取反

min-width

min-width是 媒體特征，他的意思是最小寬度滿足的時(shí)候就為真，其他媒體特征：

• width: viewport width

• height: viewport height

• aspect-ratio: viewport的寬高比如：16/9

• orientation: 寬度和高度的大小關(guān)系

• resolution: pixel density of the output device

• scan: scanning process of the output device

• grid: is the device a grid or bitmap

• color: number of bits per color component of the output device, or zero if the device isn’t color

• color-index: number of entries in the output device’s color lookup table, or zero if the device does not use such a table