愈發熟練的 CSS 技巧

時間 2019-11-05

標籤愈發熟練 css 技巧欄目 CSS 简体版

原文原文鏈接

rem + simple-flexible 適配方案

簡單解析

rem 相對於根元素 <html> 的 font-size 的大小來計算坐做爲一個單位；javascript

simple-flexible 是根據手淘團隊 lib-flexible.js，比較，改寫的一個插件，兼容 UC 豎屏轉橫屏出現的 BUG，自定義視覺設計稿的寬度：designWidth，設定最大寬度：maxWidthcss

這裏有 simple-flexible 的 Github 地址，下載下來用便可;html

第一個參數是視覺設計稿的寬度，通常視覺設計稿有 750px，能夠根據實際調整
第二個參數則是設置製做稿的最大寬度，超過 750px，則以 750px 爲最大限制；
使用時候的換算比例，是 1：100，即 1rem = 100px；

使用步驟

複製 simple-flexible 的 flexible.min.js 或 flexible.js 代碼到頁面的 <head> 的 <script> 標籤裏面；前端
而後視覺設計稿大小，調整裏面的最後兩個參數值；html5
根據設計像素，使用 rem 單位轉換的視覺設計稿裏面的 px 單位，例： 750px = 7.5rem；java

優劣

簡單實用，基本上沒有什麼劣勢，在 IIS上也已經對最新的 IPheonX 作出了適配方案，建議使用node

rem + lib-flexible 適配方案

簡單解析

lib-flexible.js 是手淘團隊製做的一個 Js 插件，實際上就是能過 JS 來動態改寫 <meta> 標籤；webpack

lib-flexible.js 基本原理是模擬 vw 把視覺稿分爲 100份，以單位 a 來講，1rem = 10a;git

以視覺稿 750px 爲例子github

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"]；
複製代碼