響應式佈局簡明示例

響應式佈局簡明示例，響應式佈局最好同時也是自適應佈局，而後再配合css3媒體查詢，來達到完美的響應式佈局。
css3的媒體查詢ie9一下是不支持的，這太遺憾了，不過幸運的是有大神已經爲前端屌絲們寫好了用於IE9如下的媒體查詢腳本文件，引用方式以下：
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

css3媒體查詢語法：
/*@media 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){    
      /*懶人建站*/
}
@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;