rem + simple-flexible 適配方案
簡單解析
rem 相對於根元素 <html> 的 font-size 的大小來計算坐作為一個單位；
simple-flexible 是根據手淘團隊 lib-flexible.js，比較，改寫的一個外掛，相容 UC 豎屏轉橫屏出現的 BUG，自定義視覺設計稿的寬度：designWidth，設定最大寬度：maxWidth
這裡有 simple-flexible 的 Github 地址，下載下來用即可;
- 第一個引數是視覺設計稿的寬度，一般視覺設計稿有 750px，可以根據實際調整
- 第二個引數則是設定製作稿的最大寬度，超過 750px，則以 750px 為最大限制；
- 使用時候的換算比例，是 1：100， 即 1rem = 100px；
使用步驟
-
複製 simple-flexible 的
flexible.min.js或flexible.js程式碼到頁面的<head>的<script>標籤裡面； -
然後視覺設計稿大小，調整裡面的最後兩個引數值；
-
根據設計畫素，使用
rem單位轉換的視覺設計稿裡面的px單位，例： 750px = 7.5rem；
優劣
簡單實用，基本上沒有什麼劣勢，在 IIS上也已經對最新的 IPheonX 做出了適配方案，建議使用
rem + lib-flexible 適配方案
簡單解析
lib-flexible.js 是手淘團隊製作的一個 Js 外掛，實際上就是能過 JS 來動態改寫 <meta> 標籤；
lib-flexible.js 基本原理是模擬 vw 把視覺稿分為 100份，以單位 a 來說，1rem = 10a;
以視覺稿 750px 為例子
1a = 7.5px， 1rem = 75px
複製程式碼使用步驟
可以根據上面的步驟，外部引入 CDN 也可以
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>
複製程式碼也可以使用模組化方式
Npm:
npm i -S amfe-flexible
複製程式碼JS:
import 'amfe-flexible'
/*
do something
*/
複製程式碼優劣
在 UC 瀏覽器上發現了，橫批豎屏轉換不過來的情況，已經找到相容方案，是通過js在頁面的 <head> 裡生成定義了 <html> 元素 font-size 的 style 元素來解決！
<style id="rootFontSize">html{font-size: 100px !important;}</style>
複製程式碼而且官方也說明這個是 vw 的過度方案，不建議長期使用；
PostCSS + VW 適配方案
簡單解析
PostCSS 將 CSS 變成 JavaScript 的資料，使它變成可操作;
VW 是基於 Viewpost 視窗的長度單位;
Viewpost 是指瀏覽器視覺化的區域，而視覺化區域即是 window.innerWidth/window.innerHeight 的大小;
與 Viewpost 相關的單位有以下四個
vw: 是 Viewport width 的簡寫 1vw = window.innerWidth的 1%；vh: 是 Viewport height 的簡寫 1vw = window.innerHeight 1%；vmin: vw 和 vh 之間的較小值vmax: vw 和 vh 之間的較大值
使用步驟
假設視覺設計稿的寬度是 750px 即 1vw = 7.5px，那麼就得根據設計圖的 px 值來轉換 vw單位，為了避免這樣的計算，當然就需要使用到 PostCSS ，以及 postcss-px-to-viewport 一個 PostCSS 的外掛
本方案使用打包工具構建專案的時候使用是最酸爽的，建議在以下環境下嘗試；
有過使用前端腳手架的童鞋，應該都有看到過專案根目錄下面都會有一個 .postcssrc 檔案，它裡面都是一些配置選項比較著名的 autoprefixer，cssnano，px2rem，cssnext...等等好玩的配置外掛，但是這裡不作這些說明，只介紹 postcss-px-to-viewport 配合 vw 使用
Npm：
npm i -S postcss-px-to-viewport
複製程式碼開啟 .postcssrc，假定視覺設計稿的寬度為 750px 改寫配置如下：
//...
"plugins": {
"postcss-px-to-viewport": true
},
"rule": {
"postcss-px-to-viewport": {
"viewportWidth": 750,
"viewportHeight": 1334,
"unitPrecision": 5,
"viewportUnit": "vw",
"selectorBlackList": [],
"minPixelValue": 1,
"mediaQuery": false
}
}
//...
複製程式碼配置完成之後，在專案中直接使用 px ，構建的時候就會自動轉換為 vw 單位了，簡直不要太爽了；
postcss-px-to-viewport 配置項說明
"viewportWidth" //設定視覺設計稿的寬度
"viewportHeight" //設定視覺設計稿的高度
"unitPrecision": //單位的精度，即保留多少位小數
"viewportUnit": //轉換的單位
"selectorBlackList": //需要忽略的選擇器
"minPixelValue": //最小畫素值
"mediaQuery": //是否允許媒體查詢轉換為 px
複製程式碼優劣
vw 的相容性貌似還沒那麼好，有可能需要做降級處理，需要使用到 CSS Houdini 和 CSS Polyfill 上一些針對 vw 單位做一個降級處理；
vw 在混合使用到 margin 的 px 時候 有可能超出 100vw ，目前使用 padding 來代替 marging 再配置上 box-sizing 可以解決，亦可以使用 css 的 calc() 函式來做一個計算；
轉換的時候多少還存在一點畫素差，無法完全還原；
附加 rem 也不需要計算的裝置
在 sublime 上面，有一個外掛 cssrem 可以讓放手寫 px 然後 sublime 自動轉換成 rem ，簡直可能愛上了 css，
配置說明如下：
px_to_rem // px轉rem的單位比例，預設為40，基本定義是視覺設計稿的寬度/10；
max_rem_fraction_length // px轉rem的小數部分的最大長度，預設為6；
available_file_types // 啟用此外掛的檔案型別。預設為：[".css", ".less", ".sass"]；
複製程式碼總結
這裡總結的三種適配方案本人都有在用，如果說用得最多的應該是第一種了，因為發現的時間比較早，所以用的自然也比較多了；
當然，還有很多本人未知的方案，但是所有的適配方案都是為了完美的還原視覺設計稿，完美解決相容性問題，當然這都是理想狀態；
感謝 @白白 的幫忙(名詞解析) + 鼓勵(催稿)
感謝兩位的四篇文章，給我帶來的啟發
原文連結 愈發熟練的CSS 技巧
原文部落格 時之物語 歡迎來玩哦~