我們想要及時地獲取信息剥险，而隨著各種形狀和尺寸的移動設(shè)備的劇增聪蘸，萬維網(wǎng)可以出現(xiàn)在你的口袋里、錢包里表制、背包里健爬，就像它在書桌、餐桌和臥室一樣方便么介。
??現(xiàn)在娜遵，網(wǎng)站的建設(shè)者需要讓訪問者能夠通過移動電話、智能手機壤短、平板電腦设拟、筆記本電腦、臺式機鸽扁、游戲機、電視機以及未來任何可以上網(wǎng)的設(shè)備獲取信息镶骗。響應(yīng)式 Web設(shè)計就是為此誕生的桶现。
??以前，為了滿足移動用戶的需求鼎姊，需要額外建立一個專門為移動設(shè)備設(shè)計的網(wǎng)站骡和。不久之前這種做法還比較流行，但是目前已經(jīng)越來越少見了相寇。不過慰于，現(xiàn)在也還有一些公司在這樣做。有的還為平板電腦建立了第三個網(wǎng)站唤衫。
??不存在可以適應(yīng)所有情形的某種正確方法婆赠。每周都有新的設(shè)備投放到市場上，而且毋庸置疑的是佳励，各家公司都在設(shè)計新的設(shè)備類型休里。那么，構(gòu)建和維護多個網(wǎng)站現(xiàn)實嗎赃承？甚至說妙黍，有必要嗎？我們無法預(yù)知未來的情形瞧剖。
??幸好拭嫁，我們有辦法構(gòu)建一個既可以運行在現(xiàn)在的設(shè)備可免，也可以運行在未來設(shè)備上的網(wǎng)站。更棒的是做粤，可以讓它在較小的屏幕浇借、較大的屏幕以及介于兩者之間的屏幕上顯示不同的效果。
構(gòu)建響應(yīng)式頁面的方法植根于以下三點驮宴。
??靈活的圖像和媒體逮刨。圖像和媒體資源的尺寸是用百分數(shù)定義的，從而可以根據(jù)環(huán)境進行縮放堵泽。
???靈活的修己、基于網(wǎng)格的布局，也就是流式布局迎罗。對于響應(yīng)式網(wǎng)站睬愤，所有的width 屬性都用百分數(shù)設(shè)定，因此所有的布局成分都是相對的纹安。其他水平屬性通常也會使用相對單位（em尤辱、百分數(shù)和 rem 等）。
??媒體查詢厢岂。使用這項技術(shù)光督，可以根據(jù)媒體特征（如瀏覽器可視頁面區(qū)域的寬度）對設(shè)計進行調(diào)整。
以下詳細介紹：
創(chuàng)建彈性布局的步驟
對于需要某個寬度實現(xiàn)預(yù)期布局的元素塔粒，設(shè) 置 width: percentage; 结借， 其 中 percentage表示你希望元素在水平方向上占據(jù)容器空間
的比例。通常說來卒茬，不必設(shè)置 width: 100%; 船老，因為默認設(shè)置為 display:block; 的元素（如 p 以及其他很多元素）或手動設(shè)置為 display: block; 的元素在默認情況下會占據(jù)整個可用空間。
??作為可選的一步圃酵，對包含整個頁面內(nèi)容的元素設(shè)置 max-width: value; 柳畔，其中 value表示你希望頁面最多可增長到的最大寬度 。通常郭赐，value 以像素為單位薪韩，不過也可以使用百分數(shù)、em 值或其他單位的值捌锭。
理解和實現(xiàn)媒體查詢
媒體查詢增強了媒體類型方法躬存，允許根據(jù)特定的設(shè)備特性定位樣式。
要調(diào)整網(wǎng)站的呈現(xiàn)樣式舀锨，讓其適應(yīng)不同的屏幕尺寸岭洲，采用媒體查詢特別方便。下面列出了可以包含在媒體查詢里的媒體特性坎匿。
? width （寬度）
? height （高度）
? device-width （設(shè)備寬度）
? device-height （設(shè)備高度）
? orientation （方向）
aspect-ratio （高寬比）
? device-aspect-ratio （設(shè)備高寬比）
? color （顏色）
? color-index （顏色數(shù)）
? monochrome （單色）
? resolution （分辨率）
? scan （掃描）
? grid （柵格）
還有一些非標準的媒體特性盾剩，如
? -webkit-device-pixel-ratio （WebKit設(shè)備像素比）
? -moz-device-pixel-ratio （Mozilla設(shè)備像素比）
除 了 orientation 雷激、 scan 和 grid 以 外，上述屬性均可添加 min- 和 max- 前綴告私。 min-前綴定位的是“大于等于”對應(yīng)值的目標屎暇，而 max- 前綴定位的則是“小于等于”對應(yīng)值的目標。
??min-width 和max-width是制作響應(yīng)式頁面時反復(fù)用到的兩個媒體特性∽に冢現(xiàn)代桌面瀏覽器和移動電話瀏覽器對媒體查詢的支持程度很高根悼。不過，InternetExplorer 8 及以下版本并不支持媒體查詢蜀撑。
??以下是媒體查詢的基本語法挤巡。
//指向外部樣式表的鏈接：
<link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />
// 位于樣式表中的媒體查詢：
@media logic type and (feature:value) {
/* 目標 CSS 樣式規(guī)則寫在這里 */
}
<head>
<meta charset="utf-8" />
<title>Media query in link</title>
<meta name="viewport" content="width=
device-width, initial-scale=1.0" />
<link rel="stylesheet" href="base.css"
media="all" />
<!--
The logic is only.
The type is screen.
The feature: value is min-width: 480px.
-->
<link rel="stylesheet" media="only
screen and (min-width: 480px)"
href="styles-480.css" />
</head>
base.css中的樣式用于所有的輸出設(shè)備。styles-480.css 中的樣式則僅用于支持媒體查詢且視覺區(qū)域?qū)挾炔坏陀?480 像素的瀏覽器酷麦。
/* 常規(guī)樣式寫在這里矿卑。
每個設(shè)備都能獲取它們，
除非被媒體查詢中的樣式規(guī)則覆蓋 */
body {
font: 200%/1.3 sans-serif;
}
p {
color: green;
}
/*
The logic is only.
The type is screen.
The feature: value is min-width: 480px.
*/
@media only screen and (min-width:480px) {
p {
color: red;
font-weight: bold;
}
}
通過媒體查詢沃饶，可以根據(jù)設(shè)備的媒體屬性應(yīng)用不同的樣式母廷。盡管媒體查詢包含了很多功能，但其中 min-width 和 max-width 是創(chuàng)建響應(yīng)式網(wǎng)頁時用的最多的糊肤。
<link rel="stylesheet" media="only screen and (min-width: 480px) and(max-width:767px)" href="styles.css" />
<link rel="stylesheet" media="only screen and (orientation: landscape)" href="styles.css" />
<link rel="stylesheet" media="only print and (color)" href="color-pages.css" />
<link rel="stylesheet" media="only print and (monochrome)" href="monochrome- pages.css" />
<link rel="stylesheet" media="only screen and (color), projection and (color)" href="styles.css" />
</head>
<body>
//這些媒體查詢與上圖中的是相同的琴昆，只是直接出現(xiàn)在樣式表中
/* 基準樣式
---------------------------------------- */
/* 針對所有設(shè)備的基準樣式 */
...
/* 開始媒體查詢
---------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* 樣式規(guī)則 */
}
@media only screen and (orientation: landscape) {
/* 樣式規(guī)則 */
}
@media only print and (color) {
/* 樣式規(guī)則 */
}
@media only print and (monochrome) {
/* 樣式規(guī)則 */
}
@media only screen and (color), projection and (color) {
/* 樣式規(guī)則 */
}
理解視覺區(qū)域及使用視覺區(qū)域 meta 元素
視覺區(qū)域（viewport）指的是瀏覽器（包括桌面瀏覽器和移動瀏覽器）顯示頁面的區(qū)域。它不包含瀏覽器地址欄馆揉、按鈕這樣的東西业舍，只是瀏覽區(qū)域。媒體查詢的 width 特性對應(yīng)的是視覺區(qū)域的寬度把介。不過勤讽， device-width 特性不是蟋座，它指的是屏幕的寬度拗踢。
??在移動設(shè)備（如iPhone）上，默認情況下這兩個值通常不一樣向臀。Mobile Safari （iPhone的瀏覽器）的視覺區(qū)域默認為 980 像素寬巢墅，但 iPhone 的屏幕只有 320 像素寬（iPhone 的 Retina 顯示屏的屏幕分辨率有640像素寬，但它們是在相同的空間擠入兩倍的像素券膀，因此設(shè)備寬度仍為320像素）君纫。
??因此，iPhone 會像設(shè)為 980 像素寬的桌面瀏覽器那樣顯示頁面芹彬，并將頁面縮小以適應(yīng)320 像素的屏幕寬度（在縱向模式下）蓄髓。結(jié)果，當你在 Mobile Safari 中瀏覽大部分為桌面瀏覽器建立的網(wǎng)站時舒帮，會顯示將這些網(wǎng)站縮小了的樣子会喝。在橫向模式下也是這樣處理的陡叠，只不過寬度為 480 像素（iPhone5 是 568 像素）。如果不進行放大肢执，頁面通常是難以閱讀的（注意不同設(shè)備的默認視覺區(qū)域?qū)挾炔⒉幌嗤?/p>
測試頁面包含一個 320 像素×480 像素的綠色 div 枉阵。Mobile Safari 的視覺區(qū)域默認為 980 像素寬，因此 iPhone 會將該 div 縮小预茄，以在 320 像素寬的屏幕內(nèi)顯示它兴溜。這就是這個綠色盒子大約占據(jù)屏幕寬度的三分之一（即320/980）的緣故。
??幸好耻陕，有一種快速解決方案拙徽。在頁面的 head 部分添加視覺區(qū)域 meta 元素即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
</head>
<body>
這段代碼的重點是 width=device-width 淮蜈。有了這條語句斋攀，視覺區(qū)域的寬度會被設(shè)成與設(shè)備寬度（對 iPhone 來說為 320 像素）相同的值，因此在縱向模式下該寬度的頁面內(nèi)容會填充整個屏幕梧田。如果不包含這一語句淳蔼，使用媒體查詢的 min-width 和 max-width 特性將不會得到預(yù)期的結(jié)果。
??代碼中的 initial-scale=1. 部分對 width 和 device-width 值沒有影響裁眯，但通常會包含這一語句鹉梨。它將頁面的默認縮放級別設(shè)成了 100%，換成縱向模式也一樣穿稳。（意存皂，iOS6 之前的版本有一個 bug，它會裁掉一部分內(nèi)容逢艘，參見http://adactio.com/journal/5802/旦袋。）如果不設(shè)置 initial-scale=1 ，在 iPhone 中它改，手機從縱向模式改為橫向模式時疤孕，網(wǎng)頁會被放大，從而讓布局與縱向模式的一致央拖。
//兼容ie8/9
<head>
...
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/styles.css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/old-ie.css" />
<![endif]-->
</head>
