详细操作实例
<div id=\"大众change-color\"大众></div>
css 代码如下：
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
这个很大略，大家都能想象出来是一个多么呆板的页面，一个 300 × 300 像素的赤色正方形在页面的中上部。学到这里的同学对付这样大略的代码该当是无压力的了。然后我们在这段 css 后面再加上一点内容，改做：
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
@media (max-width:800px){
#change-color {
width:90%;
height:300px;
margin:50px auto;
background:blue;
}
}
来一起看看这个css，这段可以分作两个部分，第一部分便是我们上面写的对 #change-color 定义的 css ，这个无需阐明了。第二部分跟我们以前看到的不一样哈，但是如果去掉 @media (max-width:800px){……} 这样的构造之后，我们可以创造，剩下的内容也是对 #change-color 的定义，只是跟上面略有不同，一个是宽度发生了变革，一个是背景色改了。那么现在我们来阐明一下这部分代码。
默认情形实行第一部分的定义，那么背景色就该当是赤色的，宽度是300px。统统犹如我们与想的一样。当浏览器内容部分的宽度小于即是800px（符合条件，最大宽度为800px）时，利用第二部分的定义，也便是宽度变成了90%，背景色变成了蓝色。
然后我们看看实际效果：当网页宽度大于800px，网页自适应宽屏。
调度窗口宽度到内容区域小于800px，网页适应屏幕窗口调度，这样现在效果实现了。
本篇属于畅想网络原创，转载地址：http://www.e-wkj.cn/xw/1824.html
