移动端布局

1.等比缩放布局(rem布局) 

 页面里边的元素会根据分辨率等比例放大或缩小                                                                             

2.为什么web app要使用rem？
   rem能等比例适配所有屏幕
   em相对于父元素，若父级无设置，则根据祖父...若都无设置，则默认16px

3.rem是什么?
   rem是根元素（html）的font-size的倍数。
   根据变化html的字体大小来控制rem的大小。
   若html没有设置字体大小，则默认为16px

4.像素分为两种：设备像素和CSS像素
　1）设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
　2）CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层
    dpr=设备像素 / CSS像素(某一方向上)
    移动端一般的设计图大小：640px/750px/1080px
    若设计图为640px——dpr为2
    若设计图为750px——dpr为2
    若设计图为1080px——dpr为3

5.vw：viewport width，视窗宽度，1vw等于视窗宽度的1%。
           640/320px 100vw 1px 100/320  31.25vw
           750/375px  100vw 1px 100/375  26.67vw
    vh：viewport height，视窗高度，1vh等于视窗高度的1%。
    vmin：vw和vh中较小的那个。
    vmax：vw和vh中较大的那个。

 6.元素大小（ rem）=原图量尺寸/dpr/100
实现方法：1、用媒体查询设置html的font-size配合rem（设置判断条件的节点），移动端的rem=px值/2/根元素的font-size
                  2、若使用  html{font-size:31.25vw;} 则无需使用@media的媒体传输， vw可等比放大，自动匹配
1rem=100px=31.25vw