响应式布局这件小事 有哪些优点和缺点该怎么设计?(3)

}

　　通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值：

/* 禁用iPhone中Safari的字号自动调整 */

html {

-webkit-text-size-adjust： none;

}

/* 设置HTML5元素为块 */

article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {

display： block;

}

/* 设置图片视频等自适应调整 */

img {

max-width： 100%;

height： auto;

width： auto9; /* ie8 */

}

.video embed， .video object， .video iframe {

width： 100%;

height： auto;

}

　　最后要注意的是在页面的头部之间加上下面这句∶

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

　　meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

　　参数设置∶

　　width – viewport的宽度

　　height – viewport的高度

　　initial-scale – 初始的缩放比例

　　minimum-scale – 允许用户缩放到的最小比例

　　maximum-scale – 允许用户缩放到的最大比例

　　user-scalable – 用户是否可以手动缩放

　　最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query Javascript来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：

<！--［if lt IE 9］>

<ｓｃｒｉｐｔ src=“http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”>

</ｓｃｒｉｐｔ> <！［endif］-->

　　好了，响应式布局的小事就这么多，如你有好的补充意见或不同的见解，可以联系我，我们一起探讨这件小事……

　　来源：觉唯前端