在PC端，屏幕1200 两端留白
在PE端就不行，首先它没有1200px那么大的宽度，其次不能留白，很丑
就需要在手机屏幕上铺满内容
viewport
在移动设备上进行网页的重构或者开发，首先我们就要搞明白viewport，只有弄明白viewport概念以及与其相关的meta标签的使用，才能更好的让我们的网页适配或者响应不同分辨率的移动设备

一． viewport的概念

设备屏幕上能用来显示我们网页的那一块区域
获取视口大小：document.documentElement.clientWidth
移动设备上的浏览器会把自己默认的视口大小设为980px或者1024px（由设备决定的）
各个浏览器默认的视口大小

使用默认视口给网页带来的后果：出现横向滚动条
因为浏览器的可视区域是比这个默认的视口大小要小一些

二． css中的1px不等于设备的1px

css中的1px在不同设备或不同环境下都不一样
在早先的移动设备上（iPhone3上，css的1px等于设备的1px）
但是在iPhone4开始，苹果公司高分子显示屏，会使分辨率提高一倍从而使得屏幕更加的清晰，但是屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素提高了一倍，在这个时候css中的1px是等于两个物理像素的，其他移动设备也是这个道理
还有一个点，双指放大功能，如果用户把网页放大一倍，那么css中的1px也会相应的增加一倍，反之一样 利用meta标签对viewport进行控制 在苹果的规范中，meta viewport有6个属性

这些属性可以同时使用，也可以单个使用，多个属性之间用逗号隔开 那么刚刚的meta标签有什么作用呢？ 宽度等于当前设备的宽度，初始缩放倍数：1，最大缩放倍数：1，不允许用户进行缩放操作 怎么把屏幕铺满：rem W3cschool中给出的css尺寸单位：

Rem是什么 前面说“em”是相对与其父元素来设置字体大小，那么这样就会存在一些问题，进行任何的元素设置，我们都需要知道其父元素的大小，在我们多次使用的时候，就会带来无法预知的错误，但是rem是相对于根元素，这样的话，我们就只需要在根源上确定一个参考值 浏览器的兼容性 Rem是CSS3新引进来的一个度量单位，那么浏览器对其的支持情况是否乐观？ 比如说火狐，苹果浏览器，谷歌浏览器都兼容，有一个不兼容那就是IE8（好惨） 以前的手机屏幕大小：320px 有一个好办法，将屏幕分成16份 每一份就是320/16=20px 如果一个div100px，5份 一直延续下来，一直是16份 由于技术的更新导致PE端设备屏幕分辨率变高，所以再分成十六份的话就会出现小数，不利于计算，所以我们只取一位小数四舍五入


px与rem的转换：
（1） 取得1rem的像素是多少
（2） 用想要转换的px除以1rem的像素