移动端布局：
rem(相对于根元素html的font-size计算的)
视口标签（移动端必备）<meta name="viewport" content="width=device-width, initial-scale=1.0">
屏幕尺寸：屏幕对角线的长度；
ppi：每英寸像素点的个数（苹果手机）
dpi：每英寸像素点的个数（安卓手机）
物理像素：固定的点值，表示设计图的大小 => ui设计师给到的值
逻辑像素：计算机中的一个坐标值 前端设置的css样式 => 前端设置的样式值
设备像素比(dpr) = 物理像素 / 逻辑像素
=> 逻辑像素(未知需要设置) = 物理像素(已知) / 设备像素比
设备像素比:
- 设计图是640px时候,设备是iphone5系列宽度是320px,640px/320px = 2
- 设计图是750px时候,设备是iphone6\7\8系列宽度是375px,750px/375px = 2 常见的设计图！！！
- 设计图是1080px时候,设备是iphone6\7\8plus+系列宽度是414px,1080px/414px = 2.67(约等于3)
第一款手机: iphone5
- 媒体查询设置 @media all and (max-width:320px){html{font-size:12px}}
- 计算公式: 常见的设计图为640px,dpr为2 计算公式: 物理像素/2 / 12px = ? rem
第二款手机: iphone6\7\8
- 媒体查询设置 @media all and (min-width:321px) and (max-width:375px){html{font-size:14px}}
- 计算公式:常见的设计图为750px,dpr为2 计算公式: 物理像素/2 / 14px = ? rem
第三款手机: iphone6\7\8 plus+
- 媒体查询设置 @media all and (min-width:376px) and (max-width:414px){html{font-size:16px}}
- 计算公式: 常见的设计图为1080px,dpr为3 计算公式: 物理像素/3 / 16px = ? rem
第一种方法：媒体查询+rem
- 媒体查询的作用是可以根据不同的设备的宽度 设置根元素的大小
- rem单位是可以将像素值转换为可以进行计算变化的值
- 优点:好理解 简单；
- 缺点:有多少设备就需要设置多少个媒体查询、计算麻烦有误差；
第二种方法: vw (viewport width) 视口宽度 1vw相等于当前视口的百分之一
（在pc端的时候 滚动条是占位置的 所以100vw和100%不相等，建议在移动端使用）
vw实现移动端布局的思路推算：
1） 100vw相当于和ui设计图的大小是一样的 1vw就是设计图的百分之一
2） 100vw / 设计图的大小 = 每一份大小
3） 得到的每一份是px单位 如何把像素转换为rem
常见的设计图750px，dpr为2，则：
1）750px / 2 = 375px
2） 375px = 100vw
3） 1vw = 3.75px
4） 1px = 0.2667vw
设置 html{font-size:0.2667vw} --每次自动乘以0.2667vw