随着科技的日新月异，各种移动端层出不求，屏幕的尺寸也大小不一，一个网页要如何才能做到自适应不同尺寸的移动端呢？最简单的方法就是编写不同的网页来应对不同的移动端。但是这种方法太过于浪费资源，而且还会大大加剧网站的制作期限，那么如何使用一个页面来自动适应PC端、手机端、以及平板等不同的设备呢？今天就让我们来学习一下。

首先，在页面中尽量使用相对宽度，而不是绝对宽度例如：

div{ width: 60%;} 或者 div{ width: auto;}

其次，在页面布局时尽量使用流动布局例如：

div{ float: left;}

这样有什么好处呢？就是当容器的宽度不够时并不会出现溢出现象，而是自动排到下方。

自适应网页最重要的根据不同屏幕尺寸加载不同样式，那么如何实现这一点。首先要在head里加上这一句话：

其中‘viewport’是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，

原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。

接下来是根据不同的尺寸规划不同的样式，以下例子是当尺寸分别为1200px以上、1200px以下、800px以下：

div{

background-color: #008800;

height: 800px;

width: 800px;

color: #00ffff;

font-size: 36px;

}

@media screen and (max-width: 1200px){

div{

background-color: #000000;

height: 400px;

width: 400px;

color: #00ff00;

font-size: 24px;;

}

}

@media screen and (max-width: 800px) {

div{

background-color: #000055;

height: 100px;

width: 100px;;

color: #ff0000;

font-size: 14px;

}

}

注意：最大宽度的限制条件一定要从大到小依次往下写，否则样式可能无法达到想要的效果