響應式布局簡明示例，響應式布局最好同時也是自適應布局，然后再配合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，不允許用戶縮放操作，
以上的頭部聲明是手機端頁面的標配。

轉載于:https://www.cnblogs.com/susanws/p/5420544.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。