最近在學習前端頁面的適配問題，問了身邊幾個前端崗位工作的的朋友移動端的適配方式，結果每個人都給出了不一樣的適配方式，前段時間正火熱的rem適配方式，現在已經慢慢vw趕上了，感嘆前端技術變化真是快。
接下來總結一下最近的學習：
移動端適配是選vw還是rem？其實並不是所有場景下的移動端頁面都適合的，採用vw或rem的方案的本質是布局等比例的縮放，這類方案可以保證頁面各元素之間位置尺寸的比例關係，並讓元素可以清晰地展現。但是在文字內容較多的頁面時候，還是比較推薦直接使用px結合flex來進行搭建。
vw可以完全替代rem嗎？
答案是否定的，因為單純使用vw進行布局不能限制布局的寬度，對於有這個需求的場景至少還是需要將vw和rem混用來處理邊界情況。
rem方案有哪些適配方法
不縮放viewport
縮放viewport
vw方案
vw + rem，以京東首頁作為案例來說，京東的移動端首頁採用了vw+rem的布局方式，元素布局上依然使用rem單位，沒有縮放viewport, html元素的font-size則使用vw + px fallback的形式，並且使用media query來限制布局寬度。
現在有乙個最新的解決方案
就是基本不用js去進行頁面的縮放，只通過在頁面中設定
/* 基於ui width=750px dpr=2的頁面 */
html
document.documentelement.style.fontsize = window.innerwidth/
7.5+
'px'
// 7.5 是750寬度的設計稿
rem 和vw結合適配移動端
rem 這個單位對於前端來說並不陌生了,在移動端適配方面,我們經常會用到它,通常我們會採用類似 flexible.js 的方案,寫px,然後通過外掛程式轉化成rem,然後得出一堆小數值的rem單位.這個方案已經用了很多年,相容性很好,然而現在已經2018年了,許多相容性問題現在不再那麼頭疼了,因此我...
移動端vw單位適配
一.專案中配置postcssrc.js，同時安裝好對應的外掛程式 module.exports 解決 import引入路徑問題 postcss url 該外掛程式主要用來處理檔案，比如檔案 字型檔案等引用路徑的處理.autoprefixer 自動處理瀏覽器字首，不用在乙個個加字首啦 postcss ...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...