响应式布局有多难？看看这篇文章

最近好几个朋友问我响应式的问题，那么我抽空写一点我对响应式网页设计的理解。

写响应式一般有两种方式：

1、自己写；

2、bootstrap框架；

在这里我们主要说说自己写。

写响应式首先要在head里面加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js使其他浏览器版本支持。

http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">

对于初学者在刚接触响应式时，可以这样理解响应式：在浏览器不同宽度或者高度下，网页采用不同的样式。

在写响应式时，采用@media only screen and (min-width: ***px)and (max-width: ***px){样式代码}而且把响应式样式代码都写在一起。在代码很多的时候不推荐这么写，我们更倾向于CSS3引入的Media Query模块。其意思就是在探测到不同宽度时引用不同的css文件。

media="screen and (min-width: 400px) and (max-device-width: 600px)"

href="***.css"/>

除了这种引用方法之外，还有在css文件中加载，虽然这种我们是不推荐的，但还是提下。

@import url("***.css") screen and (max-device-width: 400px);

说完响应式文件引入等前置条件后，我们简单介绍下布局。

宽度

初学者可以学习的时候在条件范围内可以使用指定像素宽度，但是有一定的基础的时候，一般会使用百分比宽度：width：***px；或者：width：auto；。

文字

文字不能使用绝对大小px，而是使用相对大小em。

body {font: normal 100% Helvetica, Arial, sans-serif;}

以上代码指定，文字大小是默认的100%，即16px。h1 {font-size: 1.5em;}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {font-size: 0.875em;}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

布局

才用流动布局（fluid grid），这样使用的好处在于各个盒子都是浮动的，不是固定不动的，在宽度不够时会自动到下面去，而不会因为宽度不够而溢出隐藏（overflow:hidden;），所以绝对定位（position:absolute;）也要慎用。

图片

实现图片的自动缩放，其实只需要一行代码

img { max-width: 100%;}

但是在某e老版本浏览器中是不支持的，所以只能写成

img { width: 100%; }

此外，在windows系统中，缩放图片时，也有可能引起失真的现象，所以可以添加以下命令img { -ms-interpolation-mode: bicubic; }

或者直接使用imgSizer.js插件，引入插件的代码如下

addLoadEvent(function(){

varimgs=document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

}）；

​