网页的自适应设计与背景居中

这里提供三种网页自适应的方法：

方案一：用比例控制大小

标签里写入

以下是相关的属性的解释：

1. width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
2. height：和 width 相对应，指定高度
3. initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例，1.0就是占网页的100%
4. maximum-scale：允许用户缩放到的最大比例
5. minimum-scale：允许用户缩放到的最小比例
6. user-scalable：用户是否可以手动缩放

然后网页内的所有元素的大小，位置都用%去写，不能用px等，显然比较蛋疼的一种方法。

方案二：使用媒体查询

这里会用到css3的@media,可以根据查询媒体的分辨率，针对不同的分辨率写不同的css，在执行时会自动识别来执行不同css样式，也比较繁琐。

举个例子,当浏览器窗口小于 500px 时，背景变为蓝色：

@media only screen and (max-width: 500px) {
    body {
        background-color: blue;
    }
}

方案三：定义div大小来限定

在写的所有元素外面套一个div块，规定min-width和min-height，这样在浏览器缩小尺寸的时候布局就不会乱掉。当然也要注意，这时候设计所有元素时参照的的最大的父元素就不能看body了，得看你用的div这个块的大小。(简单易实现，但并没有实现真正的自适应！）

例如：

    div{       
            min-width: 1920px;
            min-height: 1080px;

        }

最后：

提供一种可以实现背景居中和网页的元素位置居中的参考，即使改变浏览器尺寸，背景及其中元素依然可以不变位置。用到了绝对定位

 

//在定义最大的块div或body时
.div{
    position: absolute;
    width: 想要的网页背景宽度;
    height: 想要的网页背景长度;
    top:0;
    left:50%;
    margin-left:-（想要的网页背景宽度的一半） ;  //关键
}