响应式布局

标签：

关于web页面布局，我们听说过的有固定布局（fixed layout），流体布局（fluid layout），其中响应式布局是应运而生。指：

一是宽屏的愈发普及；

二是CSS3 media queries属性的诞生（通过CSS代码，实现不同宽度显示器下不同的布局，可以即时响应的web页面布局。）

语法：

@media ：<sMedia> { sRules }

取值：

<sMedia>：
    指定设备名称。
{sRules}：
    样式表定义。

浏览器兼容：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(√)Opera 9.63	(√)Safari 3.1
	(×)IE7	(×)Firefox 3.0	(√)Chrome 2.0.x		(√)Safari 4
	(×)IE8	(√)Firefox 3.5

.media_quires { width: 200px; padding: 40px 20px; background-color: #000; }
@media all and (min-width: 800px) {
            .media_quires {
                background-color: #ff0000;
            }
}
@media screen and (max-width: 1200px) {
            .media_quires {
                background-color: #0000ff;
            }
}

<div class="media_quires">改变浏览器窗口大小背景颜色改变</div>

当浏览器窗口大于1200px的时候 div背景显示红色； 当浏览器窗口小于等于1200px的时候，div背景显示蓝色。

max-width:1200px 可以理解为浏览器宽度在0~1200px（包括1200px）都显示为蓝色；

min-widht:800px 可以理解为800px（包括800px）即以上都显示为红色。

 测试：

当去掉max-width：1200的限制。当小于800px的时候为默认的黑色。

响应式布局

标签：

原文地址：http://www.cnblogs.com/zhaojieln/p/4315303.html