移动端布局

viewport

浏览器上 用来显示网页的那部分区域了
一、设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
view 有
init-scale 页面的初始缩放值 为数字
width viewport的宽度
height viewport的高度
mininum-scale 容许用户缩放最小值
maxinum-scale 容许用户缩放最大值
user-scalable 是否容许用户进行缩放

REM布局

使用rem方案能够作到适配不一样屏幕分辨率的原理：

设计稿的像素/html(font-size)=css中的代替px 因为html(font-size)这一部分是根据屏幕的宽度（媒体查询能够获得屏幕的宽度）在css内容来动态改变的。

媒体查询

使用css 能在不一样的条件下使用不一样的样式，是页面最终在不一样的终端设备达到不一样的渲染效果
@media 媒体类型 and (媒体特性) {你的样式}
使用的例子：

@media screen and(max-width: 480px) {
    html{
        font-size:200px;
    }
}

同时注意的是 IE8 既不支持html5也不支持 媒体查询
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js

"></script>
<![endif]-->