这里提供三种网页自适应的方法：
方案一：用比例控制大小
<head>标签里写入
<meta name="viewport" content="width=device-width, initial-scale=1.0">
以下是相关的属性的解释：
- width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
- height：和 width 相对应，指定高度
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例，1.0就是占网页的100%
- maximum-scale：允许用户缩放到的最大比例
- minimum-scale：允许用户缩放到的最小比例
- user-scalable：用户是否可以手动缩放
然后网页内的所有元素的大小，位置都用%去写，不能用px等，显然比较蛋疼的一种方法。
方案二：使用媒体查询
这里会用到css3的@media,可以根据查询媒体的分辨率，针对不同的分辨率写不同的css，在执行时会自动识别来执行不同css样式，也比较繁琐。
举个例子,当浏览器窗口小于 500px 时，背景变为蓝色：
@media only screen and (max- 500px) {
body {
background-color: blue;
}
}
方案三：定义div大小来限定
在写的所有元素外面套一个div块，规定min-width和min-height，这样在浏览器缩小尺寸的时候布局就不会乱掉。当然也要注意，这时候设计所有元素时参照的的最大的父元素就不能看body了，得看你用的div这个块的大小。(简单易实现，但并没有实现真正的自适应！）
例如：
div{
min- 1920px;
min-height: 1080px;
}
最后：
提供一种可以实现背景居中和网页的元素位置居中的参考，即使改变浏览器尺寸，背景及其中元素依然可以不变位置。用到了绝对定位
//在定义最大的块div或body时
.div{ position: absolute; 想要的网页背景宽度; height: 想要的网页背景长度; top:0; left:50%; margin-left:-（想要的网页背景宽度的一半） ; //关键 }