响应式布局

关于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- 800px) {
            .media_quires {
                background-color: #ff0000;
            }
}
@media screen and (max- 1200px) {
            .media_quires {
                background-color: #0000ff;
            }
}

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

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

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

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

 

 测试：

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

<link rel="stylesheet" type="text/css" href="css/normalScreen.css" media="screen and (max-1024px)">
<link rel="stylesheet" type="text/css" href="css/widthScreen.css" media="screen and (min-1024px)">

 <div class="nav">
        <h4 class="on"><a href="#">HTML代码</a> </h4>
        <h4><a href="#" >CSS代码</a></h4>
        <h4><a href="#" >JS代码</a></h4>
    </div>
    <p id="mes"></p>

normalScreen.css

.nav{ border-bottom: 1px solid #ededed; background: #f0f3f9; text-align: center;}
.nav h4{ display: inline-block; *display: inline; margin: 0 1em; padding: 5px 1em; *zoom: 1;}
.nav .on{ background-color: #34538b;}
.nav .on a{ color: #fff;}

widthScreen.css

.nav { width: 20%; border-right: 1px solid #ededed; background-color: #F0F3F9; text-align: center; float: left; }

适用于IE6,7,8使用js实现

if (!window.screenX) {
            //IE6~8
            var oStyle = document.createElement("link");
            oStyle.rel = "stylesheet";
            oStyle.type = "text/css";
//            if (document.body.clientWidth > 1024) {
            if (screen.width > 1024) {
                oStyle.href = "css/widthScreen.css";
            } else {
                oStyle.href = "css/normalScreen.css";
            }
            document.getElementsByTagName("head")[0].appendChild(oStyle);
        }

注意：1、在浏览器上没效果是因为使用screen.width显示屏幕的宽度，跟电脑设置的分辨率有关。

2、当使用document.body.clientWidth只在浏览器初始化加载的时候响应。而不是浏览器改变窗口大小响应。可以加在$(window).resize里面响应

3、此外应还注意加默认的css。防止页面在加载是出现延迟

<link rel="stylesheet" type="text/css" href="common.css" media="all" />