一、PC端 和 移动端适配分析：
1、PC端的适配，只是分辨率的不同引起的适配问题。这种适配好解决，这里就不讲了。
2、移动端的适配，移动端的适配主要是： 屏幕视口的分辨率和像素分辨率是不统一；不同手机的视口 分辨率也是不一样的。
二、（移动端）屏幕相关概念：（下面的概念只是按照个人的理解来写的，只是为了解决前端适配的而写的。其它的概念不用知道的那么清楚）
https://www.cnblogs.com/yuduxyz/p/9745962.html
1、屏幕分辨率：
2、布局视口（即浏览器的分辨率）：html和body的宽度默认都是布局视口的宽度，宽度超过body的都是属于溢出部分。
无论布局视口的宽度是多少，都是全部显示在屏幕上的。布局视口分辨率比屏幕分辨率大，会压缩到屏幕分辨率大小全屏显示。
默认的html、body的宽度就是贴着 布局视口的宽度的。
开发 是根据 布局视口的分辨率来开发的，而不是屏幕分辨率。
3、视觉视口：视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
解读：1、布局视口 设定好，就不会放大缩小。布局视口 的宽度会 完全显示在 视觉视口的宽度上。
2、视觉视口 默认的宽度就是 手机屏幕的宽度。视觉视口是可以放大的（一般双击屏幕就可以放大 视觉视口），视觉视口放大后，布局视口和视觉视口的关系没有变。所以看起来就好像是布局视口放大了。
4、理想视口【特殊值的布局视口】：就是当 布局视口的宽度 等于 设备逻辑像素 时，这个时候的布局视口就是 理想视口。
<meta name="viewport" content="width=device-width">
5、dpr ：dpr决定上面两个东西的关系。如：dpr=1，则 布局视口的分辨率 = 屏幕分辨率；dpr=2，则 布局视口分辨率 = 2 * 屏幕分辨率。
dpr越大越高清：更大像素的布局视口，压缩到更小的屏幕上显示，当然越高清了。【即，一个物理像素上，显示的css像素点越多越高清】
6、viewport 元标签可以设置dpr的值。
三、viewport 元标签 的设置：https://www.cnblogs.com/dreamflower/p/5718970.html（测试 width 和 initial-scale时，一定要把user-scalable=no设置上，避免是因为触发放大引起的变大）
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
1、width=device-width // 应用程序的宽度和屏幕的宽度是一样的。【即，布局视口 完全 展示在屏幕上】 https://blog.csdn.net/lamanchas/article/details/78473249
a、手机浏览器上都有一个默认的布局视口(一般都比设备宽度大的多)。即默认的
b、这里的 width 表示，可以理解为设置布局视口的宽度，也就是设置 html、body的宽度。(目前width的有效值好像就是device-width)
2、initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放） https://blog.csdn.net/u012402190/article/details/70172371
initial-scale可以在设置的基准值也是 device-width ，所以设置了initial-scale值，width就可以不写了。
亲测：当initial-scale值大于1时，所有标签的默认字体都变成 0 了。
3、minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）
4、maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）
5、user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）【这个属性必须设置，不然分不清楚是触发放大了，还是初始就是这么大的】
总结：这里通过 width 和 initial-scale=1.0 就可以定下 dpr的值。
综合以上的理解：viewport 元标签设置成如下
<meta name="viewport" content="initial-scale=1,user-scalable=no"> <!-- 如果要提高清晰度，可以把initial-scale设置成0.5, 这样的话开发的时候 布局视口的宽度也要变大了 -->
四、css单位 相关的功能：
1、尺寸常用单位： https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html
px、em、rem、%、vw、wh
注意：vw 是包含侧边滚动条的宽度的，所以宽度不要使用100vw（使用100%），否则会出现横向滚动条的。
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、vw单位：
6、小高度 标签的高度不要设置，或者使用em作为单位。这样可以自适应字体的变化。
7、表单元素的字体都需要设置
所有表单元素的字体都需要设置，因为表单元素的字体样式不能继承，最好是初始化的时候就给表单元素（font-size：inherit，继承父元素的字体）和body设置一个以rem为单位的值。
8、屏幕尺寸大全：https://uiiiuiii.com/screen/ ，（做移动端开发，元字符<meta name="viewport" content="width=device-width">就声明了，网页的宽度等于dp的宽度，而不是显示器分辨率的宽度。
即页面中1px=1dp。这里的px已经不是分辨率中的像素了，可以理解为一个虚拟像素吧）
9、vw对比rem优劣： https://blog.csdn.net/weixin_42554191/article/details/106288738
推荐：以前 vw 因为兼容性，使用的没有 rem 多。现在大部分的 移动端都支持了，以后 强烈建议使用 vw 单位 代替 rem单位。
五、UI 组件库的适配：
1、必须保证当前项目的 布局视口 和 UI组件库的 布局视口一致。不然使用的 UI组件会样式会错乱（偏小或偏大）。
2、解决的办法：
方案1、把UI组件库的布局视口调整到和当前项目一样。
统一把 组件库中 px单位的数据 调整下就可以实现。
如，组件库是在布局视口宽度为375px下写的，要用到布局视口宽度为750的项目上。那就要把组件库的大小统一调大一倍。
方案2、把当前项目的布局视口调整到和UI组件库一样。（推荐，这种方式更好处理）
感悟（个人观点）：不同手机屏幕宽度的变化不会相差很大，使用rem单位方案时，html的字体大小可以设置随着宽度变化同步改变（即html的字体是 连续性改变的）；
但是PC端，因为不同电脑的宽度可以相差好大，使用rem方案时，html的大小如果随着浏览器宽度的大小同步变化的话，字体大小相差太大，整个布局看起来就不和谐。
所以PC端的html字体大小通过媒体查询，在不同范围中设置会比较好（即html的字体是 分段改变的）。