pc端，屏幕1200两端留白
在PE端就不行，首先没有1200px的宽度，其次不能留白，就需要在手机屏幕上铺满内容
viewport
在移动设备上进行网页的重构或者开发，首先我们就要搞明白viewport。只要搞明白概念及其相关的meta标签的使用，才能更好的让网页适配或者响应不同的分辨率的移动设备
viewport概念
设备上屏幕能用来显示我们网页的那一块区域
获取视口大小：document.documentElement.clientWidth
移动设备上的浏览器会把自己默认的视口大小设为980px或者1024px（由设备决定）
各个浏览器默认的视口大小
使用默认视口给网页带来的后果：出现横向滚动条
因为浏览器的可是区域是比默认的视口要小
二.
css中的1px不等于设备的1px，css中1px在不同设备或不同环境下都不一样。在早先的移动设备中（苹果3上，css的1px确实等于设备上的1px），但是在苹果4开始，苹果公司高分子显示屏，会使分辨率提高一倍，从而使得屏幕更加的清晰，但是屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素提高了一倍，这个时候，css中的1px是等于两个物理像素。
双指放大功能，如果用户把页面放大一倍，那么css中的1px也会相应增加，反之一样。
利用meta标签对viewport进行控制
在苹果的规范中，meta viewport有6个属性
| width | 设置viewport的宽度 |
|---|---|
| initial-scale | 设置页面的初始缩放值，为一个数字，可以是小数 |
| minimum-scale | 允许用户的最小缩放值 |
| maximum-scale | 允许用户的最大缩放值 |
| height | 设置viewport的高度 |
| user-scalable | 是否允许用户进行缩放 |
这些属性是可以同时使用的，也可以单个使用，也可以多个属性之间用逗号隔开。
那么刚刚的标签有什么作用？
宽度等于当前设备的宽度，初始缩放倍数：1，最大缩放倍数：1，不允许用户进行缩放操作
怎么把屏幕铺满：rem
W3cshool中给出的css尺寸单位
| 单位 | 描述 |
|---|---|
| % | 百分比 |
| ln | 英寸 |
| Cm | 厘米 |
| Mm | 毫米 |
| Px | 像素（计算机屏幕上的一个点） |
| Pc | 12点活字（1px等于12点） |
| Pt | 磅（一磅等于1/72英寸） |
| Ex | 一个ex是一个字体的x-height（通常是字体尺寸的一半） |
| Em | 1em等于当前的字体尺寸，2em等于当前字体尺寸的2倍，在css中em非常好，因为它可以自适应用户所使用的字体 |
rem是什么？
前面说”em“是相对其父元素来设置字体大小，进行任何的元素设置，我们都需要知道其父元素的大小，在多次使用的时候，就会出现错误，但是rem是相对于根元素，这样的话，我们就只需要在根源上确定一个考值
浏览器的兼容性
rem是css3新引进的一个度量单位，那么浏览器对其支持的情况是否乐观？
比如火狐，苹果浏览器，谷歌浏览器都兼容，有一个不兼容那就是IE8
以前的手机屏幕大小：320px
将屏幕分成16份，每一份就是320/16=20px
如果一个div是100px，5份
由于技术的更新导致pe端设备屏幕分辨率变高，所以再分16份就会有小数出现，不利于计算，所以只取一位小数四舍五入
px和rem转换
(1)取得1rem的像素是多少
(2)用想要转换的px除以1rem的像素