響應(yīng)式布局簡(jiǎn)明示例，響應(yīng)式布局最好同時(shí)也是自適應(yīng)布局，然后再配合css3媒體查詢，來(lái)達(dá)到完美的響應(yīng)式布局。
css3的媒體查詢ie9一下是不支持的，這太遺憾了，不過(guò)幸運(yùn)的是有大神已經(jīng)為前端屌絲們寫(xiě)好了用于IE9以下的媒體查詢腳本文件，引用方式如下：
<!--[if lt IE 9]>
?? ?<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

css3媒體查詢語(yǔ)法：
/*@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){
?? ?
}
看了這幾個(gè) 寫(xiě)法是不是感覺(jué)響應(yīng)式布局不過(guò)如此，哈哈，其實(shí)就是這么簡(jiǎn)單。

別急，在仔細(xì)想想好像還少點(diǎn)啥，比如在移動(dòng)端、手機(jī)上打開(kāi)這個(gè)網(wǎng)頁(yè)的話，如果做響應(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" />
如果不是很明白，就直接粘貼過(guò)去使用就可以了。
width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是，網(wǎng)頁(yè)寬度采用設(shè)備寬度，縮放比例為1，不允許用戶縮放操作，
以上的頭部聲明是手機(jī)端頁(yè)面的標(biāo)配。

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

總結(jié)

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

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