CSS适配，方案

1、尺寸常用单位：   https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html

px、em、rem、%

2、CSS的长度单位适配方案   ：  https://www.jianshu.com/p/eb237e2c0ecf

3、rem的使用： 用px 写CSS，构建时替换为rem

并不提倡直接在代码里写rem，因为你并不知道你当前的1rem代表多少。所以最好的方式是代码里直接用px描述字体和大小，并在后期将其转化为rem（通过构建构建工具自动转化）。

4、em的适配：https://www.jianshu.com/p/d256dac7414d 或

字体：只在body上设置一个font-size，其它的 文本标签父元素不要设置 font-size，文本的 font-size 使用 em，作为单位。则所有的字体的大小都会以 body的字体 作为参考。

元素宽高：相对于当前标签内文本的字体尺寸，即以标签内的 font-size 作 参考（如当前行内文本的字体未被人为设置，则以当前标签继承的font-size大小作为参考。亲测如此）。

总结：不同的属性使用 em单位，因为参考点有区别，容易引起混乱。没有rem好用。

引起混乱的原因：父标签设置一个font-size，好给元素设置宽高。这时子元素的font-size就相对于父标签的font-size，而不是body的字体。

解决混乱方法（定标准）：如果严格控制所有的父标签不去设置font-size（即只在包含文本的最小标签中，给他设置字体），这样就可以实现所有的em单位都是以 body字体 作为参考了。

5、小高度 标签的高度不要设置，或者使用em作为单位。这样可以自适应字体的变化。

6、表单元素的字体都需要设置

所有表单元素的字体都需要设置，因为表单元素的字体样式不能继承，最好是初始化的时候就给表单元素（font-size：inherit，继承父元素的字体）和body设置一个以rem为单位的值。

7、屏幕尺寸大全：https://uiiiuiii.com/screen/ ，（做移动端开发，元字符<meta name="viewport" content="width=device-width">就声明了，网页的宽度等于dp的宽度，而不是显示器分辨率的宽度。

 即页面中1px=1dp。这里的px已经不是分辨率中的像素了，可以理解为一个虚拟像素吧）

感悟（个人观点）：不同手机屏幕宽度的变化不会相差很大，使用rem单位方案时，html的字体大小可以设置随着宽度变化同步改变；但是PC端，因为不同电脑的宽度可以相差好大，使用rem方案时，html的大小如果随着浏览器宽度的大小同步变化的话，字体大小相差太大，整个布局看起来就不和谐。所以PC端的html字体大小通过媒体查询，在不同范围中设置会比较好。