移动手机网站怎么才能自适应屏幕

文章来源：畅想网络 | 本文作者：小编 | 发布时间：2015-06-25 21:55:08 | Tag标签：手机网站制作

25 2015

移动手机网站的趋势不容小看，随着科技的发展，越来越多的智能手机蜂拥而出，互联网科技从此也要崛起。今天的教程介绍下，页面如何自动适应屏幕。其实这个功能现在做起来很简单，以下操作步骤和解决方案。

首先是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 的定义，只是跟上面略有不同，一个是宽度发生了变化，一个是背景色改了。那么现在我们来解释一下这部分代码。

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

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

网页自适应宽屏

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