1. 程式人生 > >響應式布局3

響應式布局3

媒體 ron min-width 方式 use imu screen ott 時也

響應式布局簡明示例,響應式布局最好同時也是自適應布局,然後再配合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