更多：https://juejin.im/post/5cddf289f265da038f77696c#heading-21
更多：https://www.cnblogs.com/yuanziwen/p/6926561.html
更多：https://blog.csdn.net/u012402190/article/details/70172371
物理值
1、分辨率：图片上宽高像素点
2、PPI pixel pre inch 每英寸所包含的物理像素点
3、DPI dois pre inch 每英寸包含的点数，可以是屏幕像素点 或者是打印机的墨点
4、DIP device independence pixel设备独立像素，在设备上使用视网膜穿透技术，让每个设备看起来是一样的但是实际上是用更多的像素点来渲染，比如实际上是1px在更高分辨率的设备上将代表更多的实际物理像素，否则无法在不同的设备上让我们看到的是一样的视觉效果
5、DPR device pixel ratio 设备像素比=实际物理像素/设备独立像素
安卓ios、web开发
ios android react native开发的样式单位都是独立设备像素，可以进行统一转化
web端开发用到的最多的单位是px
meta viewport 适配
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
1.布局窗口： 网页布局的基准（pc浏览器窗口），因为设备宽度太小不能展示完全在浏览器上的网页布局，默认设置了布局窗口为浏览器宽度980px，。获取方式：document.documentElement.clientWidth
2.视觉窗口：看到的地方都是视觉窗口，与布局窗口的区别在于，缩放的时候改变的是视觉窗口大小，布局窗口是不变的，css不变，但是1px代表的实际物理像素个数会进行缩放。获取方式：window.innerWidth
3.理想窗口：每个设备都不同，可以理解为设备宽度的像素大小（不变的）
4 meta设置content的含义：
——width = device.width 布局窗口等于理想窗口宽度（坑：iPhone iPad上不论横屏还是竖屏 device-width都是竖屏的宽度）
——initial-scale =1 理想视口宽度 / 视觉视口宽度 缩放的是视觉视口，当设置为1的时候，说明视觉视口跟理想窗口一致，也就是布局窗口等于设备宽度了。（坑：window phone 不论横屏竖屏都是竖屏的宽度）
其实上面两种两者都可以实现当前的布局视口等于理想视口，但是我们会都写上，这样就可以避免出现那两个坑了。
width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是width和视觉视口宽度的最大值。最大值作为布局视口 width or 视觉视口的最大值
响应式布局和自适应布局
- 流式布局：尽量少用绝对宽度 多用百分比，图片设置max-width: 100%实现自适应；使用vh，vw也可以实现流式布局，1vw,1vh是1%的视口宽高
- 弹性布局：相对大小的字体rem（相对根元素的字体大小来缩放，不止可以设置字体，还可以设置宽高）
- 响应式布局：css3的媒体查询media，在不同条件下设置不同的布局。
- 自适应：设置meta，不同大小的设备上，页面等比缩放相对位置一样的页面效果，其实rem也是一样的效果 但是meta可能会使像素失真，rem则是高清的方案
在实际操作中都是综合来使用的，一般是流式+弹性+响应式
vue打包时将px转化为rem的loader
const px2remLoader = {
loader: 'px2rem-loader',
option: {
remUnit: 75 // 设计图宽度÷10
}
