移动端网页设计基础之Viewport的概念与Rem是什么

在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也会相应的增加一倍，