移动端的适配

参照https://www.jb51.net/article/149140.htm, https://www.jianshu.com/p/b13d811a6a76

基本概念

1. 屏幕尺寸：屏幕对角线的长度，单位是英寸，1英寸=2.54cm;
2. 屏幕分辨率：屏幕横纵方向上的像素点数，单位是px,1px=1个像素点，一般表示为：纵向乘横向，例如：1960*1080
3. 物理像素/设备像素(dp)：屏幕能显示的最小粒度，设备/物理像素固定
4. css像素(dip)：与设备无关的像素，在标准显示密度下（普通屏），一个css像素对应一个设备像素。苹果的视网膜屏幕（Retina）的分辨率是普通屏的两倍，一个css像素就对应两个设备像素。如果用户进行缩放，则一个css像素对应的设备像素值也会随之变化。

css像素与物理像素的关系依赖于scale

对于web开发者而言，我们使用的每个css 和JavaScript定义的像素本质上都是css像素，在开发过程中我们并不关心一个css像素跨越了多少个设备像素，我们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。

5. 像素比（dpr）：物理像素/独立像素(css像素)，retina屏的dpr为2，即2个物理像素对应一个css像素，3倍屏的dpr为3。viewport中的scale和dpr是倒数关系。js中获取dpr: window.devicePixelRatio，部分浏览器不支持
6. 布局视口：layout viewport = document.documentElement.clientWidth，比实际视口要宽
7. 真实视口：visual viewport = window.innerWidth;部分机型不能正常获取
8. 理想视口：ideal viewport，没有固定的尺寸，最适合移动端，不同的设备拥有不同的理想视口，它的意义在于，无论分辨率为多少，都可以完美的呈现给用户。所有的iphone的理想视口都是640px*320px

适配方案：

1. 设置meta标签
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
2. 使用rem，根据设备宽度动态设置根元素的font-size
3. 设置viewport的scale为1/dpr，可以画出1px的线条
4. 使用vm/vh

关于移动端适配，参照https://www.jb51.net/article/149140.htm, https://www.jianshu.com/p/b13d811a6a76

rem

基准设备宽度baseWidth(iphone678)：375
基准根元素baseFontSize: 16px
baseWidth/baseFontSize = width/font-size
获取当前设备的设备宽度，根据以上基准值，算出根元素的font-size