響應(yīng)式布局簡明示例，響應(yīng)式布局最好同時也是自適應(yīng)布局，然后再配合css3媒體查詢，來達(dá)到完美的響應(yīng)式布局。
css3的媒體查詢ie9一下是不支持的，這太遺憾了，不過幸運(yùn)的是有大神已經(jīng)為前端屌絲們寫好了用于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的設(shè)備尺寸中 響應(yīng)式布局的特定樣式*/
}
@media screen and (max-width:360px){
?? ?
}
@media screen and (max-width:320px){
?? ?
}
看了這幾個 寫法是不是感覺響應(yīng)式布局不過如此，哈哈，其實就是這么簡單。

別急，在仔細(xì)想想好像還少點啥，比如在移動端、手機(jī)上打開這個網(wǎng)頁的話，如果做響應(yīng)式布局，還要在head區(qū)域加上如下代碼：
<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 大概意思是，網(wǎng)頁寬度采用設(shè)備寬度，縮放比例為1，不允許用戶縮放操作，
以上的頭部聲明是手機(jī)端頁面的標(biāo)配。

轉(zhuǎn)載于:https://www.cnblogs.com/susanws/p/5420544.html

總結(jié)

以上是生活随笔為你收集整理的响应式布局简明示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。