Npm:

npm i -S amfe-flexible

JS:

import "amfe-flexible"

/*
do something
*/

在 UC 瀏覽器上發(fā)現(xiàn)了，橫批豎屏轉(zhuǎn)換不過(guò)來(lái)的情況，已經(jīng)找到兼容方案，是通過(guò)js在頁(yè)面的 里生成定義了 元素 font-size 的 style 元素來(lái)解決！

而且官方也說(shuō)明這個(gè)是 vw 的過(guò)度方案，不建議長(zhǎng)期使用；

PostCSS 將 CSS 變成 JavaScript 的數(shù)據(jù)，使它變成可操作;

VW 是基于 Viewpost 視窗的長(zhǎng)度單位;

Viewpost 是指瀏覽器可視化的區(qū)域，而可視化區(qū)域即是 window.innerWidth/window.innerHeight 的大小;

與 Viewpost 相關(guān)的單位有以下四個(gè)

vw : 是 Viewport width 的簡(jiǎn)寫(xiě) 1vw = window.innerWidth的 1%；

vh : 是 Viewport height 的簡(jiǎn)寫(xiě) 1vw = window.innerHeight 1%；

vmin : vw 和 vh 之間的較小值

vmax : vw 和 vh 之間的較大值

假設(shè)視覺(jué)設(shè)計(jì)稿的寬度是 750px 即 1vw = 7.5px，那么就得根據(jù)設(shè)計(jì)圖的 px 值來(lái)轉(zhuǎn)換 vw單位，為了避免這樣的計(jì)算，當(dāng)然就需要使用到 PostCSS ，以及 postcss-px-to-viewport 一個(gè) PostCSS 的插件

本方案使用打包工具構(gòu)建項(xiàng)目的時(shí)候使用是最酸爽的，建議在以下環(huán)境下嘗試；

parceljs

webpack

有過(guò)使用前端腳手架的童鞋，應(yīng)該都有看到過(guò)項(xiàng)目根目錄下面都會(huì)有一個(gè) .postcssrc 文件，它里面都是一些配置選項(xiàng)比較著名的 autoprefixer，cssnano，px2rem，cssnext...等等好玩的配置插件，但是這里不作這些說(shuō)明，只介紹 postcss-px-to-viewport 配合 vw 使用

Npm：

npm i -S postcss-px-to-viewport

打開(kāi) .postcssrc，假定視覺(jué)設(shè)計(jì)稿的寬度為 750px 改寫(xiě)配置如下：

//...
"plugins": {
  "postcss-px-to-viewport": true
},
"rule": {
  "postcss-px-to-viewport": {
    "viewportWidth": 750,
    "viewportHeight": 1334,
    "unitPrecision": 5,
    "viewportUnit": "vw",
    "selectorBlackList": [],
    "minPixelValue": 1,
    "mediaQuery": false
  }
}
//...

配置完成之后，在項(xiàng)目中直接使用 px ，構(gòu)建的時(shí)候就會(huì)自動(dòng)轉(zhuǎn)換為 vw 單位了，簡(jiǎn)直不要太爽了；

postcss-px-to-viewport 配置項(xiàng)說(shuō)明

"viewportWidth"        //設(shè)置視覺(jué)設(shè)計(jì)稿的寬度
"viewportHeight"       //設(shè)置視覺(jué)設(shè)計(jì)稿的高度
"unitPrecision":       //單位的精度，即保留多少位小數(shù)
"viewportUnit":        //轉(zhuǎn)換的單位
"selectorBlackList":   //需要忽略的選擇器
"minPixelValue":       //最小像素值
"mediaQuery":          //是否允許媒體查詢轉(zhuǎn)換為 px

vw 的兼容性貌似還沒(méi)那么好，有可能需要做降級(jí)處理，需要使用到 CSS Houdini 和 CSS Polyfill 上一些針對(duì) vw 單位做一個(gè)降級(jí)處理；

vw 在混合使用到 margin 的 px 時(shí)候 有可能超出 100vw ，目前使用 padding 來(lái)代替 marging 再配置上 box-sizing 可以解決，亦可以使用 css 的 calc() 函數(shù)來(lái)做一個(gè)計(jì)算；

轉(zhuǎn)換的時(shí)候多少還存在一點(diǎn)像素差，無(wú)法完全還原；

在 sublime 上面，有一個(gè)插件 cssrem 可以讓放手寫(xiě) px 然后 sublime 自動(dòng)轉(zhuǎn)換成 rem ，簡(jiǎn)直可能愛(ài)上了 css，

配置說(shuō)明如下：

px_to_rem                   // px轉(zhuǎn)rem的單位比例，默認(rèn)為40，基本定義是視覺(jué)設(shè)計(jì)稿的寬度/10；
max_rem_fraction_length     // px轉(zhuǎn)rem的小數(shù)部分的最大長(zhǎng)度，默認(rèn)為6；
available_file_types        // 啟用此插件的文件類(lèi)型。默認(rèn)為：[".css", ".less", ".sass"]；

這里總結(jié)的三種適配方案本人都有在用，如果說(shuō)用得最多的應(yīng)該是第一種了，因?yàn)榘l(fā)現(xiàn)的時(shí)間比較早，所以用的自然也比較多了；

當(dāng)然，還有很多本人未知的方案，但是所有的適配方案都是為了完美的還原視覺(jué)設(shè)計(jì)稿，完美解決兼容性問(wèn)題，當(dāng)然這都是理想狀態(tài)；

感謝 @白白 的幫忙(名詞解析) + 鼓勵(lì)(催稿)

感謝 @w3cplus，@前端開(kāi)發(fā)博客，

感謝兩位的四篇文章，給我?guī)?lái)的啟發(fā)

再聊移動(dòng)端頁(yè)面的適配

使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配

rem自適應(yīng)布局

rem自適應(yīng)js

原文鏈接 愈發(fā)熟練的CSS 技巧

原文博客 時(shí)之物語(yǔ) 歡迎來(lái)玩哦~