愈發熟練的 CSS 技巧

噫醬永不放棄發表於2018-05-27
CSS

愈發熟練的 CSS 技巧

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；

使用步驟

  1. 複製 simple-flexible 的 flexible.min.js 或 flexible.js 程式碼到頁面的 <head> 的 <script> 標籤裡面；

  2. 然後視覺設計稿大小，調整裡面的最後兩個引數值；

  3. 根據設計畫素，使用 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"]；
複製程式碼

總結

這裡總結的三種適配方案本人都有在用，如果說用得最多的應該是第一種了，因為發現的時間比較早，所以用的自然也比較多了；

當然，還有很多本人未知的方案，但是所有的適配方案都是為了完美的還原視覺設計稿，完美解決相容性問題，當然這都是理想狀態；

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

感謝 @w3cplus，@前端開發部落格，

感謝兩位的四篇文章，給我帶來的啟發

原文連結 愈發熟練的CSS 技巧

原文部落格 時之物語 歡迎來玩哦~

相關文章