響應式布局3
響應式布局簡明示例，響應式布局最好同時也是自適應布局，然後再配合css3媒體查詢，來達到完美的響應式布局。
css3的媒體查詢ie9一下是不支持的，這太遺憾了，不過幸運的是有大神已經為前端屌絲們寫好了用於IE9以下的媒體查詢腳本文件，引用方式如下：
<!--[if lt IE 9]>
<script src="http://scottjehl.github.io/Respond/dest/respond.src.js"></script>
<![endif]-->
註意：以上兼容IE9 以下 css3媒體查詢 的方法在本地是無效的，必須在服務器上面運行所有代碼。
css3媒體查詢語法：
[email protected] screen and (min-width:1440px) and (max-width:1600px){}*/
@media screen and (min-width:1440px){ /*大於等於1440*/
/*這裏是特定的樣式表*/
body,input,textarea,select,small,a{font-size:14px;}
}
@media screen and (max-width:1024px){
/*123*/
}
@media screen and (max-width:768px){
/*不大於768px的設備尺寸中 響應式布局的特定樣式*/
}
@media screen and (max-width:360px){
}
@media screen and (max-width:320px){
}
看了這幾個 寫法是不是感覺響應式布局不過如此，哈哈，其實就是這麽簡單。
別急，在仔細想想好像還少點啥，比如在移動端、手機上打開這個網頁的話，如果做響應式布局，還要在head區域加上如下代碼：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />
如果不是很明白，就直接粘貼過去使用就可以了。
width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是，網頁寬度采用設備寬度，縮放比例為1，不允許用戶縮放操作，
以上的頭部聲明是手機端頁面的標配。
懶人建站認為響應式布局最好是先做最簡單版本，然後再擴展成復雜版本，這樣做的好處的在手機上訪問的時候可以只載入簡單版本的js和css文件，而在PC端寬屏上將會載入復雜的龐大的js和css文件。
如果你真的要做響應式布局響應到手機端的話，對於字體字號的選擇推薦使用rem做為單位，
設置如下：
html{font-size: 62.5%;}
使用的時候，如果你要設置一個16px的字號，用rem字號表示就是 1.6rem，font-size:2em; == font-size:20px;
響應式布局3