移动端开发

在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 name="viewport" content="width=device-width,initial-scale=1.0,maxiumu-scale=1.0,user-scalable=0"/>

在苹果的规范中，meta viewport有6个属性
Width 设置viewport的宽度
Initial-scale 设置页面的初始缩放值，为一个数字，可以是小数
Minimum-scale 允许用户的最小缩放值
Maximum-scale 允许用户的最大缩放值
Height 设置viewport的高度（没什么卵用）
User-scalable 是否允许用户进行缩放
这些属性可以同时使用，也可以单个使用，多个属性之间用逗号隔开
那么刚刚的meta标签有什么作用呢？
宽度等于当前设备的宽度，初始缩放倍数：1，最大缩放倍数：1，不允许用户进行缩放操作
怎么把屏幕铺满：rem
W3cschool中给出的css尺寸单位：

单位 描述
% 百分比In

英寸 Cm
厘米 Mm
毫米 Px
像素（计算机屏幕上的一个点） Pc 12点活字（1pc等于12点）
Pt 磅（一磅等于1/72英寸）
Ex 一个ex是一个字体的x-height（通常是字体尺寸的一半）
Em 1em等于当前的字体尺寸

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