在處理移動端自適應布局時，目前前端最流行的方法應該就是使用**查詢，來設定html的字型大小，然後用rem為單位對dom的寬高進行設定，這個方法的優勢在於相容性方面很好，劣勢則在於當前市場上不同的機型太多，尺寸種模擬較雜，所以要想做到所以尺寸機型都能適應，工作量相對比較大。目前也有人會選擇用百分比進行布局，這個布局方法在僅僅處理元素的寬高上面非常好用，但是當js中要對dom元素的尺寸進行設定時，百分比的侷限性就出來了，還有就是dom元素的font-size沒辦法用頁面寬度百分比對他進行大小設定，也就是乙個元素寬高在佔比頁面50%時，一段文字會在不同寬度的手機螢幕上顯示不同的行數。如下：
這是在iphone4中的顯示，
這是在iphone6中的顯示，
因此如何讓頁面所有元素都能做到自適應，這是目前需要解決的問題。這時候，c3中的乙個新的長度單位——vw。這個單位的說明是：相對於視口的寬度。視口被均分為100單位的vw，也就是說在375寬度的螢幕中，1vw等於3.75px，320的螢幕中，1vw等於3.2px。這樣的話對於不同尺寸的螢幕有了乙個統一的單位來進行衡量，這時我們再結合rem，即對html設定字型大小font-size：calc(100vw/18.75)——這是以iphone6的尺寸為設計圖時做的計算，此時在iphone6尺寸的頁面中1rem為20px；通過對設計圖的還原，此時頁面元素的大小已經可以等比例適應任意寬度的終端了。
這是通過這個設定在iphone4中的顯示效果：
這是通過設定在iphone6中的顯示效果：
我們可以看到，兩種機型上的顯示效果已經完全一樣了。
當然，這種方法目前存在的最大問題仍然是相容問題
移動端自適應布局
一 前言 一般在做移動端過程中，常用的有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...