let's 移动端适配

先说几个概念

1. 物理像素：比如iphone6/7的像素分辨率，指排列在屏幕上的物理像素数
2. 设备独立像素：打开chrome开发者工具，可以看到不同机型的设备独立像素，比如iphone6/7 375*667
3. css像素：代码里的像素单位
4. 设备像素比dpr：物理像素 / 设备独立像素，比如iphone 7的dpr为2，iphone 11为3
5. 布局视口：一般默认是980px(设备独立像素)
6. 视觉视口：视觉视口是布局视口当前的可见部分，移动端一般指屏幕宽度

移动端布局，和这些有什么联系呢？

1. 元素的尺寸单位px对应css像素，在不缩放情况下，css像素=设备独立像素
2. 布局视口如果不调整，会超出屏幕宽度，需要滚动查看（浏览器会自动缩小以适应，但是字号会被缩小，也就是css像素被缩小），所以在移动端开发中，会在head中插入meta，保证布局视口=视觉视口，缩放比例 = css像素 / 设备独立像素，设置缩放比例=1，保证css像素=设备独立像素 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >
3. 至此，布局视口=视觉视口，css像素=设备独立像素，接下来就是如何将设计稿等比缩放到不同移动端的问题了
4. 一般设计师以iphone6为标准，给出两倍图750*1334，这里就是设备独立像素

总结：具体适配方案

1. viewport设置，保证移动端布局视口等于设备宽度
2. 使用rem相对单位，取屏幕宽度的n分之一作为根元素字体大小（动态获取屏幕宽度）。比如flexible.js是设置根元素大小为屏幕宽度十分之一
3. 设计稿元素尺寸除以设计稿宽度的n分之一，以实现设计稿等比缩放到不同设备

px转rem，vue项目可使用postcss-plugin-px2rem插件

其他适配方案

1. vw/vh
2. 百分比