移動端項目總結......

標籤：

響應式布局簡明樣本，響應式布局最好同時也是調適型配置，然後再配合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){    
      /*divcss8*/
}
@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，不允許使用者縮放操作，
以上的頭部聲明是手機端頁面的標配。

divcss8認為響應式布局最好是先做最簡單版本，然後再擴充成複雜版本，這樣做的好處的在手機上訪問的時候可以只載入簡單版本的js和css檔案，而在PC端寬屏上將會載入複雜的龐大的js和css檔案。

如果你真的要做響應式布局響應到手機端的話，對於字型字型大小的選擇推薦使用rem做為單位，
設定如下：
html{font-size: 62.5%;}
使用的時候，如果你要設定一個16px的字型大小，用rem字型大小表示就是 1.6rem，font-size:2em; == font-size:20px;

 

/*資料網址*/

1.http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=404009356&idx=1&sn=e3218b95b78a5f043e7b0e3df49703d3&scene=23&srcid=0826EHWxMr3B9DI8fBywolpA#rd

2.http://520ued.com/article/549125815f85b6b44ca20b2b

3.http://www.cnblogs.com/breakdown/p/4231708.html

4.http://www.codeceo.com/article/font-size-web-design.html

5.http://www.lao8.org/article_1380/xiangyingshi

6.http://www.jb51.net/web/475964.html

7.http://www.lao8.org/article_1380/xiangyingshi

移動端項目總結......