1.可以使用百分比嗎？
如果所有元素的大小都設定成html或body大小的乙個百分比，理論上的確可以在不同的裝置上實現自適應。但是事與願違，並非所有情況都可以設定百分比，比如浮動元素會脫離文件流，父級元素必須預先確定高度才能設定高度百分比。這些問題當然都有很好的解決方案，但是這些缺陷已經足以讓我們在自適應的道路上拋棄它了。
2.rem如何實現自適應
實際的元素/設計的元素 == 實際的頁面/設計的頁面
所謂"設計"就是我們寫**期望網頁呈現出來的樣子，所有元素的大小和位置都和我們預想的一摸一樣。通常在電腦端呈現出來的就是和設計的是一樣的，但是移動端由於螢幕比電腦端小，呈現出來的樣子就會不太一樣，錯位時有發生，所以才需要適配。
如果上面的等式恆成立，則說明適配成功。實際的元素 == 設計的元素 * （ 實際的頁面/設計的頁面），也就是是說需要知道（ 實際的頁面/設計的頁面）,設為k。試想，如果css中有乙個屬效能知道這個比例k,那麼適配問題就已經完美解決了。可惜，並沒有這個屬性。但是,幸運的是，rem可以充當我們和這個比例之間的橋梁，rem可以看作乙個單位，它可以和根元素的文字大小關聯，也就是說把html的font-size設為k，比如裝置螢幕尺寸是300px,設計稿寬度是600px,則html的字型大小就是320/640 = 0.5px，沒錯，這個值一般都很小，但是font-size的值一般在10px以上，雖然html裡的font-size肯定會被下面設定的font-size所覆蓋，但是處於習慣，還是會將這個k值乘上乙個係數，一般是100，上面這個例子的話，html的字型大小就是50px。
這樣，我們就找到了頁面上不變的東西，就可以以不變應萬變。至此，頁面上所有元素的大小都可以用rem，或者說比例k來表示。
rem的缺陷
第一，和根元素font-size值強耦合，系統字型放大或縮小時；第二，rem是通過px換算的，難免會出現小數點（雖然乘上乙個係數已經削弱了這個問題的影響），部分安卓機很容易出現的樣式錯亂的問題；第三，html檔案頭部需插入一段js**。為什麼需要這段**呢？就是為了計算上面的比例k,為了計算k，就必須知道當前裝置的寬高，因此js**是鼻部可少的。
下面是我在網上找到的一段比較好的**。
(function(doc, win) ;
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window)
4.那麼vw可以做什麼呢
為了彌補這些缺陷，目前比較主流的自適應方式就是rem+vw布局（至少解決了大部分問題吧…）。
首先，什麼是vw呢？
1vw = 可視視窗的寬度的百分之一。
1vh = 可視視窗的寬高度的百分之一。
順便一提，
vmin是指選擇vw和vh中最小的那個，而vmax是選擇最大的那個。
第一，vmin和vmax配合@media查詢使用，就可以解決視窗適配的問題了！
第二，rem的那段js**不用寫了，**簡潔性大大增加。而vw和vh是css3自帶的屬性，無需新增額外的**。
5.使用vw+rem實現移動端自適應
前面已經說了用sass函式，將px轉換成rem,然後整個頁面就可實現自適應，但是要寫一段js**實現rem的動態變化。現在就不用這麼麻煩了，只要用sass函式將rem的值用vw來表示，vw自己會動態變化。
5.為什麼一開始不用vw+rem進行布局
因為vw最大的弱點在於相容性，畢竟這是css3新加的屬性，ios8，android4.4以上才相容。但是時過境遷，現在大部分裝置都已經相容了。
6.為什麼不單獨使用vw
因為因為視口單位有個缺點就是它沒有最小或者最大限制，這就達不到我們都時候所希望的乙個限制（比如視窗太小了，字都看不清）。所以我們可以在根元素上設定vw和vh，然後在根元素上限制最大最小值，然後配合body設定最大最小寬度。
這個部落格對我產生了一點點啟發：
移動端自適應布局
一 前言 一般在做移動端過程中，常用的有rem布局 px轉rem工具的使用，本文將針對vue專案介紹一種px轉vw布局的實現方案。本文所用腳手架為vue cli搭建的，如何搭建請看作者的另一篇文章 vue cli3搭建vue專案 二 正文 要想實現px轉vw的自動轉化，需要在專案中自少引入如下4個依...
rem自適應布局 移動端自適應必備
由於移動端特殊性，本文講的是如何使用rem 實現自適應 或叫rem 響應式布局，通過使用乙個指令碼就可以rem自適應 rem是相對於根元素 這樣就意味著，我們只需要在根元素確定乙個px字型大小，則可以來算出元素的寬高。1rem 16px 瀏覽器html的畫素，可以設定這個基準值 假如瀏覽器的html...
移動端webapp自適應布局
請看這篇 hcysunyang的blog 一篇真正教會你開發移動端頁面的文章 二 width device width 這段 是讓布局視口的尺寸等於理想視口。裝置畫素比 dpr 裝置畫素個數 理想視口畫素個數 device width function doc,win win.addeventlis...