標籤：
這裡有點要提到的是，我們常規會將PC版的頁面和移動端裝置的頁面獨立開來設計，這樣會讓PC端的頁面配置更靈活和好維護。如果你希望你的頁面能適配包括PC端在內的任何裝置，那麼下面幾個小工具可以方便你顧及舊版本IE所存在的困擾：
⑴ IE8-不能識別HTML5的<hearder>、<article>、<footer>、<figure>等標籤，可以通過 html5.js 來解決：
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
然後將下面代碼寫入你的base.css來格式化html5標籤：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
⑵ IE8-不支援CSS3 media queries，即不支援"@media only screen"文法，可以通過 css3-mediaqueries.js 來解決：
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
本文僅談論移動端的頁面適配方式，不考慮PC螢幕環境，不過原理均是相通的。本文也不討論SPA/OPA的實現。
（一）百分比賦值
相信許多剛接觸響應式頁面設計的朋友，第一時間考慮到的就是將layout數值設為百分值形式，包括width、height、padding、margin等大小、位移、方位的賦值。 例如：
View Code常規來說我們會用固定值或者自動值來設定容器的高度，一旦我們想要使用百分比來設定元素高度時，我們可能會這麼寫：
View Code但在運行代碼後，你會發現該高度樣式並沒有生效。解決這個問題的方法很簡單，給外層元素"bady,html"添加一個 height:100% 的樣式即可，具體原理可以查閱我的舊文章CSS百分比定義高度的冷知識 。
VIEWPORT介紹
這裡先打斷一下文章，簡單介紹下“viewport”，做移動端頁面開發的朋友必須瞭解viewport。
我們在使用移動端裝置瀏覽網頁時，移動端瀏覽器是直接把整個頁面放到一個虛擬視圖裡來顯示的，通常來說這個虛擬視圖大小會比手機螢幕大，使用者可以通過手勢操作來平移、縮放這個視圖。
為了方便理解，我們假設有這麼一個頁面：
① 如果沒有viewport這種東西，在移動端瀏覽器上訪問該頁面可能是這樣的：
② 有了viewport後是這樣的：
viewport誕生的初衷是為了讓移動端更人性化地瀏覽PC端頁面，但它也帶來了一些問題，從而催生了類似iscroll.js的工具。
想瞭解更多關於viewport的知識請點這裡。
（二）禁用移動端裝置的部分特性（非必要，按需使用）
⑴ 禁用viewport縮放功能
在頁面頭部加上如下語句來禁用viewport的縮放特性（響應式頁面基本是按百分比來布局和適配的，使用者縮放頁面反而影響閱讀效果）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
如上我們設定viewport初始化時便適配裝置瀏覽器的寬度，且無法縮放，該meta標籤具體參數如下：
width：viewport 的寬度，可以指定一個固定值，如650；或者可以是device-width，表示裝置的寬度。
height：和 width 相對應，可指定高度。
initial-scale：頁面初始縮放比例(0-1)
maximum-scale：允許使用者縮放到的最大比例(0-1)
minimum-scale：允許使用者縮放到的最小比例(0-1)
user-scalable：使用者是否可以手動縮放（yes/no）
上述meta標籤可能會在舊版的iphone中導致布局錯誤的問題，因為舊版的iphone會預設把頁面做980寬度渲染，但最終以320寬度顯示，我們可以再接著加一句meta標籤來相容（讓iphone以320的寬度來渲染頁面）：
<meta name="MobileOptimized" content="320">
⑵ 禁用Webkit文本調節功能
無論是移動端還是PC端，webkit核心的瀏覽器會自動調節文字大小。例如Chrome不會顯示小於12px的字型大小效果，即使你設定 font-size:10px，頁面也將渲染為12px的大小。
另外行動裝置在縱向模式和橫向模式查閱頁面時，文本的大小也會被瀏覽器調節：
禁用該功能的途徑是使用-webkit-text-size-adjust 來設定（chrome28+已失效）：
body { -webkit-text-size-adjust: 100%;}
（三）CSS3 media queries
CSS3 media queries（後簡稱為CMQ）算是響應式頁面設計的一把瑞士軍刀，可以把你的頁面在不同解析度的環境下雕琢成對應的、最好看的輪廓，掌握了CMQ也算是掌握了響應式頁面設計的基礎。
CMQ在樣式檔案中的使用很簡單，其文法為
@media only screen and (max/min-width/height: 960px) {
/* 樣式定義 */
}
其中橙色高亮的 “only screen” 參數表示限定當訪問環境（媒體類型）為彩色螢幕裝置時才生效。
該參數可選值為 all | aural | braille | handheld | print | projection | screen | tty | tv |embossed
除非該參數數值為all，否則可以在前面加個only限定類型。對於移動端和PC端，我們只需設為 "screen" 或 "only screen" 即可，建議使用後者，其語義更為嚴謹。
另一個高亮的參數 “max/min - width/height” 表示當螢幕的寬度/高度超過或者小於某個值時則生效，具體可以看下面的樣本：
⑴ Max Width
@media only screen and (max-width:500px){ .outDiv { margin: 0 auto; width: 85%; height: 50%; background: red; }}
該程式碼片段表示只有當螢幕寬度小於500px時才生效。
⑵ Min Width
@media only screen and (min-width:500px){ .outDiv { margin: 0 auto; width: 85%; height: 50%; background: red; }}
該程式碼片段表示只有當螢幕寬度大於500px時才生效。
⑶ Max/Min Height
同 max/min-width ，表示當螢幕高度小於/大於設定值時樣式才生效。常規來說，我們使用 max/min-width 比較多，而很少使用 max/min-height 。
⑷ Multiple Media Queries
有時候我們需要定義樣式是在某個解析度區間（比如500px-900px）才生效，這時候我們可以疊加使用 max/min-width/height 。
方法很簡單，加多一個“and”即可：
@media only screen and (mix-width:500px) and (max-width:900px){ .outDiv { margin: 0 auto; width: 85%; height: 50%; background: red; }}
⑸ Device Width
我們上述的 max/min-width/height 均是針對可視地區解析度的，如果希望針對裝置的實際寬度來適配，我們可以利用 max-device-width 來實現：
@media only screen and (max-device-width:900px){ .outDiv { margin: 0 auto; width: 85%; height: 50%; background: red; }}
該程式碼片段表示當裝置螢幕寬度小於900px時，其內部定義的樣式生效。打個比方，如果瀏覽器開啟了一個小視窗（非全螢幕顯示），該視窗的寬度對該段代碼沒有任何影響。
只要你的電腦螢幕寬度是大於900px的（你應該不會使用解析度太低的PC螢幕吧？），上面這段代碼就不會生效。
⑹ 標籤化的CMQ
CMQ不僅僅可以寫在樣式檔案中，也可以標籤化，直接寫在頁面<head>標籤內，其寫法如下：
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="small_screen.css" />
該代碼錶示在視圖寬度小於800px時則引入small_screen.css這個外部樣式檔案。
另外你還可以利用orientation來判斷裝置的方向（垂直模式portrait/橫向模式landscape）：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
但常規我們並不推薦使用orientation，因為它無法告知你關於裝置解析度的任何資訊，所以作為一個通用的規則，應該避免orientation而使用device-width代替。
（四）例子
我們來做一個小例子，讓它能按要求，在三個解析度區間做不同的適配布局：
先寫原型架構：
View Code接著利用CMQ，依照三種分別率區間來定義樣式：
View Code這裡需要提醒的一點是，我們對於文本字型大小的定義建議使用 em 來賦值，畢竟不同終端不同瀏覽器會依據解析度大小來設定文本的預設大小，從而方便使用者閱讀，利用 em 來按比例調整字型大小能迎合終端瀏覽器的這個人性化特點。
共勉~
移動端web開發
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
