vue做移動端適配最佳解決方案,親測有效
阿新 • • 發佈:2019-01-04
最近在做商城的專案,發現有讚的ui非常適合,但有一個問題是有讚的ui用的單位是px,做不了移動端的適配,官網的提供的vw適配方案發現不可行,最後還是決定rem來做適配,上網搜了一下,發現了一套可用方案,親測有效哦
它的原理是藉助px2rem 外掛方便的將px單位轉為了rem
具體步驟:
- 安裝
npm install px2rem-loader lib-flexible --save
- 在main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
- 在build下的 utils.js中,找到generateLoaders 方法,新增以下程式碼
const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5 } } function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader, px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
- 重啟專案,會發現自己設定的px被轉為rem 了
- 但是有一定的侷限性
以上實現轉換適用於:
(1)元件中編寫的<style></style>下的css
(2)從index.js或者main.js中import ‘../../static/css/reset.css’引入css
(3)在元件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css
另外的情況不適用:
(1)元件<style></style>中@import “../../static/css/reset.css (可考慮上面(2)、(3)的形式引入)
(2)外部樣式:<link rel=”stylesheet” href=”static/css/reset.css”>
(3)元素內部樣式:style=”height: 417px; width: 550px;”
另外我要補充的是:在做移動端適配的時候我們不建議給字型也設定rem的單位,針對這種情況,我為字型適配的解決方案是使用媒體查詢,檔案以元件<style></style>中@import “../../static/css/reset.css形式引入,可完美解決移動端適配問題