是我個人偏好的一種方法，優點是可以省去大量的適配時間和精力，
一、總的辦法是首先使用一點js判斷裝置寬度，再給根元素html設定font-size，從而適配整個頁面。
二、css中，無論是字型大小還是寬高，如果都使用em或rem單位（1px的可以無視），最終都是由根元素html的font-size大小決定的。舉個例子，比如設計圖是640px寬，我一般會設定html的font-size為20px, 假設乙個移動端的body寬度（或者可用寬度，這個視情況定）為clientwidth，那麼要在這個終端還原設計圖，就需要將適配後的html的font-size數值改為clientwidth/(640/(20*2))(移動端字型大小一般要除2)，再渲染整個dom。js如下：
function adaptfun(designpercent)
}adaptfun(640/40);
我把上邊**單獨放乙個檔案(adapt.js)中;
三、在頁面上如何放置和執行adapt.js
adapt.js最好盡量往上放，盡量緊跟在body後就好（如下），因為這時並沒有載入多少東西，但已經可以判斷document.body.clientwidth了，這樣就可以改變原始的html的font-size值了。
這樣，頁面在絕大多數終端上將呈現原設計圖效果，即使有device-pixel-ratio1.5或3的裝置，由於相對位置不會變，也只能寫一句媒本查詢即可（除非特別複雜的頁面，否則媒本查詢也不需要）。
四、優點和感概
如果靠**查詢適配，會寫不少**，很頭疼，以後有相似的專案想要借鑑，甚至還需重新適配，花去大量時間。
我個人覺得，這種只要寫好乙個設計寬度的版本(比如寫乙個640或320寬的)就好，其它自動適配，和寫pc頁面差別不大。
五、補充一下
這種方法有乙個問題是，不能很好的三等分乙個寬度，而css3可以比較接近地解決這個問題（可以使用33.33333%）。個人覺得，三等分乙個寬度，從數學角度看是不可能的。css3的方法也只是接近而已。
與其這樣，不如簡單些，比如html:40px,設計圖640px,那麼寬度就是16em,不必究結三等分這個無解的問題，直接5.3em,5.3em,5.4em就行，效果挺好。
移動端自適應布局
一 前言 一般在做移動端過程中，常用的有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...