网站建设中使用CSS来实现自适应屏幕大小

本篇文章主要介绍下如何使网站自适应屏幕的大小。其实，这个问题并不是很难做，可以使用CSS来实现。

具体操作实例小编在下面已经写出来了：

<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