先說好處：無需借助js，只用css就可以實現一定屏寬範圍內元素大小隨螢幕寬度改變平穩變化。
再說用法：
第一步：元素大小單位選用rem。
第二步：根據設計稿的螢幕寬度設定html的font-size大小，且單位用vw。
第三步：通過media query設定html根font-size的最大最小px值。
以上就是把大象關冰箱的三個步...啊呸，是一定範圍內適配任意螢幕寬度的三個步驟。
例：假設設計稿是1200px的螢幕，第一二步的效果將是：
1200px寬度的螢幕，html的font-size設為1vw，p標籤設為1rem，則為12px實際大小；
1800px寬度的螢幕，html的font-size設為1vw，p標籤設為1rem，則為18px實際大小；
但如果螢幕寬度是375px，p標籤1rem的話，實際大小就只有3.75px了。雖然谷歌瀏覽器做了最小字型大小限制(12px)但我們還是希望能自己控制它的大小。於是就有了第三步：
@media screen and (max-width: 1200px) {
font-size: 12px;
再舉個例子，假如設計稿是375的螢幕。我們將html的font-size設為12/3.75 = 3.2vw。
375px的螢幕下，p標籤設為1rem，則實際大小為12px。
400的螢幕下p標籤設為1rem，則實際大小為12.8px。
so，you see。沒有借助js，我們就實現了字型大小平穩變化。
好了，上面把好處和結論都給出來了。下面要說原理了：
no.1 啥是rem？
也不單說rem定義了，隨便一搜就有，看完彷彿過眼雲煙，轉瞬即忘。還是來個css中各單位的對比吧，一看就明白，還順便鞏固了別的單位概念：em: 本身元素的font-size值的相對大小(2em就是2倍本元素font值大小)
rem:根元素(html)的font-size值的相對大小
vw：viewport(螢幕)寬度的1%
vh：viewport(螢幕)高度的1%
%：相對于父元素的大小
px：實際畫素值
為什麼要用rem？
首先，為什麼不用px很顯然了，設完就是個定死的值，完全無法自適應。其次，為啥不用em？因為隨著元素的巢狀，這個相對值將隨時改變。使**結構複雜難懂。tada！那為什麼用rem呢？就是因為1能自適應，是個相對值。2是因為其相對根元素的大小，參照物不變，可以貫穿於**始終。
no.2 啥是vw？
上邊那個表已經說了：vw：viewport(螢幕)寬度的1%。加粗：螢幕寬度的1%！
這意味著，vw本身就帶有自適應屬性。所以，如果我們把html的font-size設為1vw，則它的實際畫素值是隨著螢幕大小改變而改變的。1200px的螢幕，1vw就是12px，375px的螢幕，1vw就是3.75。
vw+rem適配的方法繞過了js，直接使用css完成任意寬度適配，就是靠vw的這個特性。為什麼要繞過js呢，因為還是css效能好啊！
我們說到1200px的螢幕，根font-size是1vw，那麼當我們設定具體的元素大小時，此時使用根font-size相對大小的rem時，就使得具體的任意元素大小都隨著根font-size，也就是1vw而改變了。
比如p標籤的字型大小設為1rem，那就是1vw，那就是12px！
如果是1800px的螢幕，p標籤字型大小設為1rem，那就是1vw，那就是18px了!
如此，隨著螢幕的大小改變，元素大小都隨之改變！
no.3 還是要用**查詢的！
雖然繞過了js，但還是繞不過**查詢的，我們看到假如設計稿是1200px，那在一定範圍內，字型和螢幕寬度成正比都還合理。但如果螢幕過大或過小。比如375px，此時你字型縮縮成了3.75px，肯定就不是我們所期望的了！
所以在給根字型font-size設為vw單位的同時，我們要控制其上下限。具體控制範圍按實際情況而定。
舉個例子：設計稿1500px時，最小字型低於12px就對人類不友好了，所以，當螢幕寬度低於1200的時候，就將根html的font-size定格在12px：
@media screen and (max-width: 1200px) {
font-size: 12px;
下限情況同理。
no.4相容
vw的相容可能會差一點。查一下：
也還行！
summary!
樣式嘛，能用css解決就不要用js。。。vw+rem實現了原來js才能實現的效果，感覺通體舒暢，開心極了！與君共享！hooray！
css3vw適配 使用vw rem實現移動端適配
利用視口單位實現適配布局 響應式布局的實現依靠 查詢 media queries 來實現，選取主流裝置寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流裝置尺寸下呈現完美適配。即使使用rem方式來布局，也需要寫一段js 來動態改變根元素的大小。比較成熟的做法如手淘的...
vw 前端 css中vw是什麼意思？
在css中，vw是一種視窗單位，也是相對單位。相對於視口的寬度，視口被均分為100單位的vw。下面本篇文章就來給大家介紹一下，希望對大家有所幫助。css 單位是一種量度單位，包括尺寸單位和顏色單位。我們常使用向對單位，不會使得網頁在不同的檢視下造成布局混亂的情況。vw是viewport s widt...
IPHONE X前端適配
cover 使頁面佔滿螢幕。auto 和 contain 選項表現一樣 safe area inset left 安全區域距離左邊邊界距離 safe area inset right 安全區域距離右邊邊界距離 safe area inset top 安全區域距離頂部邊界距離 safe area in...