移动网页设计基础（viewport）

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的像素