当前位置:网站首页 / 建站知识 / 网站制作知识

网页自适应屏幕的实现

来源:未知时间:2015-04-16 09:39点击:

从教程开始就有人一直追着我问这个网页自适应怎么做。其实这个功能现在做起来很简单,但是你要是前边的基础掌握的不好那就剩下迷糊了。简单的说就是一个媒体查询的事情,但是……做起来常常要写两遍 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 哦,这段 css 可以分作两个部分,第一部分就是我们上面写的对 #change-color 定义的 css ,这个无需解释了。第二部分跟我们以前看到的不一样哈,但是如果去掉 @media (max-width:800px){……} 这样的结构之后,我们可以发现,剩下的内容也是对 #change-color 的定义,只是跟上面略有不同,一个是宽度发生了变化,一个是背景色改了。那么现在我们来解释一下这部分代码。

默认情况执行第一部分的定义,那么背景色就应该是红色的,宽度是 300px。一切如同我们与想的一样。当浏览器内容部分的宽度小于等于 800px(符合条件,最大宽度为 800px)时,使用第二部分的定义,也就是宽度变成了90%,背景色变成了蓝色。

然后我们看看实际效果:当网页宽度大于 800px

网页自适应宽屏

然后调整窗口宽度到内容区域小于 800px

网页适应屏幕窗口调整

现在效果实现了,那么在来解释一下关键的语法——

@media (条件){条件达成时执行的 css 样式}

条件可以设置很多种,比如:max-width、min-width、max-height、min-height …… max 是最大,min 是最小,就是当宽度(高度)最大(最小)是什么什么时去执行大括号里的东东。注意:这里指的不是一个单纯的值,而是一个范围,他给出的是一个上限(或者下限)。

甚至我们还可以联合几个条件一起使用,比如:

@media (min-width:300px) and (max-width:800px){条件达成时执行的 css 样式}

这就是当浏览器的内容范围宽度在 300px 到 800px 执行这部分 css 语句。

现在留一个问题给大家思考:前面举例的 css 代码可以被看作两个部分,那么我把两个部分的顺序调调换行不行?为什么?

现在,我们来一起做个小练习看看。我们就做一个很简单的自适应页面好了。这个页面十分简单,就是页头、页尾、内容、侧边四部分,很古典的布局(土得掉渣)。来开始写结构

<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sider"></div>
</div>
<div id="footer"></div>

然后为了我们方便辨认,我再给每个里面加个标题写明他们是什么,然后就变成了这样:

<div id="header"><h2>页头</h2></div>
<div id="main">
<div id="content"><h2>内容</h2></div>
<div id="sider"><h2>侧边</h2></div>
</div>
<div id="footer"><h2>页尾</h2></div>

又是如此简单的 html ,剩下的工作还是扔给辛苦的 css 去了。

h2 {
text-align:center;
line-height:36px;
}
#header, #footer {
width:960px;
height:150px;
margin:10px auto;
background:#CCC;
overflow: hidden;
}
#main {
width:960px;
margin:10px auto;
background:#FCC;
padding:15px;
overflow: hidden;
}
#content, #sider {
float:left;
margin:15px
}
#content {
width:600px;
height:450px;
background:#CFC;
}
#sider {
width:300px;
height:350px;
background:#CCF;
}

然后就写出了如下这个奇葩的页面:

网页自适应屏幕布局

这诡异的配色……到底还是清晰的显示出了每一个区域的位置,各位将就看下吧。

然后我们在 css 后面继续添加内容,当然我们需要思考一下,当前的布局适应的是电脑,大屏幕哦,要是屏幕小于 960px 就肯定要出现横向滚动条,比如……手机

那么我们来适应一下我们假象中的小屏幕吧。

@media (max-width:1024px){
#header, #footer {
width:90%;
}
#main {
width:90%;
}
#content, #sider {
float:none;
margin:5%;
width:90%;
}
}

大家看到我为小于 1024px 的屏幕写的 css 并不多,是因为没写到的部分可以继承前面的默认定义,现在元素的宽都改作了百分比的形式。这时候你打开网页……嗯,还是以前的样子哈,但是让你调整窗口的宽度逐渐变小,就会看到网页变成下图的样子,这就是网页自适应了。

网页自适应屏幕效果