移动端布局

准备工作：设置meta标签；

<meta name="format-dtection" content="telephone=no"/>

视口的设置：

utf-8 国际编码 charest 编码

viewport 适口 ，所能看到的范围，

width=device-width 宽度等于屏幕宽度；

initial-scale：缩放比例1

minimun-scale:最小比例；

maximun-scale:最大比例；

user-scalable：用户是否可以手动缩放；

dpr设备像素比=设备像素/逻辑像素（rtina屏的手机上，dpr为2，1个像素相当与2个物理像素）；

rem 相对单位 相对于html根元素 font-size进行计算的；

推算思路；

1、写网页都是px像素单位，px是固定不变的。

2、移动端切换的时候，宽高大小不一样。

3、网页中有一个盒子（2rem），html字体默认大小为16px

4、改变每一个移动端的html{font-size}的值，

计算公式：dpr=物理像素/逻辑像素

dpr表示物理像素比；

物理像素表示ui设计图量出来的大小；

逻辑像素表示前端需要设置的css样式的大小；

常见的设计图的dpr的大小：“640px的设计图dpr为2，750px的设计图dpr为2，1080px的设计图dpr为3；

rem=逻辑像素/font-size；

总结：当设计图为640px的时候，dpr为2，计算方式为 物理像素/dpr/当前html字体大小的值；

苹果5 默认字体大小12px;

苹果6、7、8默认字体大小为14px;

苹果plus默认字体大小为16px;

移动端第一种布局方式：媒体查询+rem单位实现

优点：简单好理解；

缺点：计算麻烦，有多个设备要写多个媒体查询；

第二种移动端布局方式：

vw单位（viewport width）；

关于vw单位的理解：视口宽度 1vw=浏览器视口的百分之一；

100vw是否等于100%？

浏览器横向有滚动条的时候不等于；

没有滚动条的时候等于；

推算思路：100vw可以看成100%width；

ui设计图：1vw=设计图的1%；

设备像素比=物理像素比/逻辑像素比；

1、设计图是640px dpr为2（默认）

640px/2=100vw;

320px=100vw；

1vw=3.2px;

1px=0.3125vw;

2、设计图是750px dpr为2（默认）

750px/2=100vw;

375px=100vw;

1vw=3.75px;

1px=0.2667vw;

总结：当设计图是640px的html ,字体大小为0.3125vw;

当设计图是750px的html,字体大小为0.2667vw；
优点：简单；

缺点：无