響應式佈局這件小事（轉）

講到響應式佈局，相信你們都有必定的瞭解，響應式佈局是今年很流行的一個設計理念，隨着移動互聯網的盛行，爲解決現在各式各樣的瀏覽器分辨率以及不一樣移動設備的顯示效果，設計師提出了響應式佈局的設計方案。今天就和你們來說講響應式佈局這件小事，包含什麼是響應式佈局、響應式佈局的優勢和缺點以及響應式佈局該怎麼設計（經過CSS3 Media Query實現響應佈局）。

1、什麼是響應式佈局?

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

2、響應式佈局有哪些優勢和缺點?

優勢：

1. 面對不一樣分辨率設備靈活性強
2. 可以快捷解決多設備顯示適應問題

缺點：

1. 兼容各類設備工做量大，效率低下
2. 代碼累贅，會出現隱藏無用的元素，加載時間加長
3. 其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
4. 必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

3、響應式佈局該怎麼設計?

咱們在上面瞭解了什麼是響應式佈局，那在咱們的實際項目中應該怎麼去設計呢?在以往咱們設計網站的時候都會受到不一樣瀏覽器的兼容性的困擾，如今還要來個不一樣尺寸設備，咱們該怎麼淡定下來呢?有需求就會有解決方案，呵呵，說到響應式佈局，就不得不提起CSS3中的Media Query（媒介查詢），這但是個好東西，易用、強大、快捷……Media Query是製做響應式佈局的一個利器，使用這個工具，咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。接下來就一塊兒來深刻的瞭解Media Query。

一、CSS中的Media Query（媒介查詢）是什麼?

經過不一樣的媒體類型和條件定義樣式表規則。媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。媒體查詢的大部分媒體特性都接受min和max用於表達」大於或等於」和」小與或等於」。如：width會有min-width和max-width媒體查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設備，將會運用更加的普遍。

二、media query可以獲取哪些值?

• 設備的寬和高device-width，device-heigth顯示屏幕/觸覺設備。
• 渲染窗口的寬和高width，heigth顯示屏幕/觸覺設備。
• 設備的手持方向，橫向仍是豎向orientation(portrait|lanscape)和打印機等。
• 畫面比例aspect-ratio點陣打印機等。
• 設備比例device-aspect-ratio-點陣打印機等。
• 對象顏色或顏色列表color，color-index顯示屏幕。
• 設備的分辨率resolution。

三、語法結構及用法

@media 設備名 only (選取條件) not (選取條件) and(設備選取條件)，設備二{sRules}

示例一：在link中使用@media：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css"/>

上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。

示例二：在樣式表中內嵌@media：

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

在示例二中，設置了電腦顯示器分辨率（寬度）大於或等於1024px（而且最大可見寬度爲989px）；屏寬在480px及其如下手持設備；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持設備；屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。

從上面的例子能夠看出，字符間以空格相連，選取條件包含在小括號內，srules爲兼容設置的樣式表，包含在中括號裏面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）爲邏輯關鍵字，多種設備用逗號分隔，這一點繼承了css基本語法。

四、可用設備名參數：

類型	解釋
all	全部設備
braille	盲文
embossed	盲文打印
handheld	手持設備
print	文檔打印或打印預覽模式
projection	項目演示，好比幻燈
screen	彩色電腦屏幕
speech	演講
tty	固定字母間距的網格的媒體，好比電傳打字機
tv	電視

五、邏輯關鍵字：

關鍵字	說明
only	限定某種設備類型
and	邏輯與，鏈接設備名與選擇條件、選擇條件1與選擇條件2
not	排除某種設備
,	設備列表

六、可用設備名參數：

媒體特性	值	可用媒體類型	接受min/max	簡介
width	<length>	視覺屏幕/觸摸設備	yes	定義輸出設備中的頁面可見區域寬度(單位通常爲px)
heigth	<length>	視覺屏幕/觸摸設備	yes	定義輸出設備中的頁面可見區域高度(單位通常爲px)
device-width	<length>	視覺屏幕/觸摸設備	yes	定義輸出設備的屏幕可見寬度(單位通常爲px)
device-heigth	<length>	視覺屏幕/觸摸設備	yes	定義輸出設備的屏幕可見高度(單位通常爲px)
orientation	portrait | landscape	位圖介質類型	no	定義’height’是否大於或等於’width’。值portrait表明是，landscape表明否即設，備手持方向：portait爲橫向，landscape爲豎向
aspect-ratio	<ratio>	位圖介質類型	yes	定義’width’與’height’的比率，即瀏覽器的長寬比
device-aspect-ratio	<ratio>	位圖介質類型	yes	定義’device-width’與’device-height’的比率，即設備屏幕長寬比。如常見的顯示器比率：4/3， 16/9，16/10
color	<integer>	視覺媒體	yes	定義每一組輸出設備的彩色原件個數。若是不是彩色設備，則值等於0
color-index	<integer>	視覺媒體	yes	定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0
monochrome	<integer>	視覺媒體	yes	定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0
resolution	<resolution>	位圖介質類型	yes	定義設備的分辨率。如：96dpi，300dpi，118dpcm
scan	progressive | interlace	電視類	no	定義電視類設備的掃描工序， progressive逐行掃描，interlace隔行掃描
grid	<integer>	柵格設備	no	用來查詢輸出設備是否使用柵格或點陣。只有1和0纔是有效值，1表明是，0表明否

七、測試Media Queries

最後，咱們須要對咱們剛剛設計的Media Queries進行測試，想要在不一樣設備上測試Media Queries的效果，可使用一個瀏覽工具來檢驗不一樣尺寸屏幕下的顯示效果，在這裏爲你們介紹一個不錯的在線工具 – Responsivator，它能夠模擬iPhone等各類不一樣設備，而且還能夠自定義不一樣尺寸屏幕的顯示效果，只須要輸入一個url甚至是本地的一個url(如:http://127.0.0.1/)，就能夠看到網站在不一樣尺寸屏幕下的顯示效果.

八、經過Media Queries實現響應式佈局設計

好了，咱們明白了什麼是Media Query，那咱們一塊兒來運用到響應式佈局的設計項目中去。設計思路很簡單，首先先定義在標準瀏覽器下的固定寬度（假如標準瀏覽器的分辨率爲1024px，那麼咱們設置寬爲980px），而後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的分辨率小於1024px的時候，則經過Media Query預設的樣式表來將頁面的寬度設置爲百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理，當瀏覽器的可視區域改變到某個值（假如爲650px）的時候，頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看咱們的例子：

 /* 當瀏覽器的可視區域小於980px */
@media screen and (max-width: 980px) {
     #wrap {width: 90%; margin:0 auto;}
     #content {width: 60%;padding: 5%;}
     #sidebar {width: 30%;}
     #footer {padding: 8% 5%;margin-bottom: 10px;}
}
 /* 當瀏覽器的可視區域小於650px */
@media screen and (max-width: 650px) {
     #header {height: auto;}
     #searchform {position: absolute;top: 5px;right: 0;}
     #content {width: auto; float: none; margin: 20px 0;}
     #sidebar {width: 100%; float: none; margin: 0;}
 }

經過上面咱們就能夠監測瀏覽器的可視區域變化的是時候咱們的頁面結構元素也會相對應的變化，固然你能夠再多設置幾個尺寸的監測層疊樣式表，這樣子就能夠根據不一樣尺寸設備來進行響應式的佈局。爲了更好的顯示效果，咱們每每還要格式化一些CSS屬性的初始值：

/* 禁用iPhone中Safari的字號自動調整 */
html {
	-webkit-text-size-adjust: none;
}
/* 設置HTML5元素爲塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/* 設置圖片視頻等自適應調整 */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
	width: 100%;
	height: auto;
}

最後要注意的是在頁面的頭部<head></head>之間加上下面這句∶

<meta name="viewport" content="width=device-width; initial-scale=1.0">

meta viewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。

參數設置∶

• width – viewport的寬度
• height – viewport的高度
• initial-scale – 初始的縮放比例
• minimum-scale – 容許用戶縮放到的最小比例
• maximum-scale – 容許用戶縮放到的最大比例
• user-scalable – 用戶是否能夠手動縮放

最後對於在IE瀏覽器中不支持media query的狀況，咱們可使用Media Query JavaScript來解決，只須要在頁面頭部引用css3-mediaqueries.js便可。示例：

<!--[if lt IE 9]>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script> <![endif]-->

原文地址：http://www.jiawin.com/response-type-layout-design/