简单3步完成响应式布局

响应式布局简明示例，响应式布局最好同时也是自适应布局，然后再配合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，不允许用户缩放操作，

以上的头部声明是手机端页面的标配。

切图网认为响应式布局最好是先做最简单版本，然后再扩展成复杂版本，这样做的好处的在手机上访问的时候可以只载入简单版本的js和css文件，而在PC端宽屏上将会载入复杂的庞大的js和css文件。

如果你真的要做响应式布局响应到手机端的话，对于字体字号的选择推荐使用rem做为单位，

设置如下：

html{font-size: 62.5%;}

使用的时候，如果你要设置一个16px的字号，用rem字号表示就是 1.6rem，font-size:2em; == font-size:20px;

切图网（qietu.com）整理编辑，更多响应式布局相关文章敬请关注切图网公众微信账号：qietuwang