一、PC端 和 移動端適配分析：
1、PC端的適配，只是分辨率的不同引起的適配問題。這種適配好解決，這里就不講了。
2、移動端的適配，移動端的適配主要是： 屏幕視口的分辨率和像素分辨率是不統一；不同手機的視口 分辨率也是不一樣的。
二、（移動端）屏幕相關概念：（下面的概念只是按照個人的理解來寫的，只是為了解決前端適配的而寫的。其它的概念不用知道的那么清楚）
1、屏幕分辨率：
2、布局視口（即瀏覽器的分辨率）：html和body的寬度默認都是布局視口的寬度，寬度超過body的都是屬於溢出部分。
無論布局視口的寬度是多少，都是全部顯示在屏幕上的。布局視口分辨率比屏幕分辨率大，會壓縮到屏幕分辨率大小全屏顯示。
默認的html、body的寬度就是貼着 布局視口的寬度的。
開發 是根據 布局視口的分辨率來開發的，而不是屏幕分辨率。
3、dpr ：dpr決定上面兩個東西的關系。如：dpr=1，則 布局視口的分辨率 = 屏幕分辨率；dpr=2，則 布局視口分辨率 = 2 * 屏幕分辨率。
dpr越大越高清：更大像素的布局視口，壓縮到更小的屏幕上顯示，當然越高清了。【即，一個物理像素上，顯示的css像素點越多越高清】
4、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的字體是 分段改變的）。