如何使页面自适应屏幕大小呢

来 源：畅想网络　 作 者：小 编　 发布时间：2015-07-04

本篇教程主要介绍下，如何使网站页面自适应屏幕的大小。其实，功能做起来很简单，我们可以使用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，网页适应屏幕窗口调整，这样现在效果实现了。

上一篇：分享：廊坊网站制作经典实用技巧

下一篇：站长如何看待网站排名动荡起伏问题