vue-cli3.0結合lib-flexible、px2rem實現移動端適配,完美解決第三方ui庫樣式變小問題

五月一一發表於2019-11-17

vue-cli3.0結合lib-flexible、px2rem實現移動端適配,完美解決第三方ui庫樣式變小問題 公司最近做的一個移動端專案從搭框架到前端開發由我獨立完成,以前做移動端適配用的媒體查詢,這次想用點別的適配方案,然後就採用了vue-cli3.0結合lib-flexible、px2rem實現移動端適配的方案,開發過程中也遇到一些坑,自己選的方案自己填坑吧。以下記錄我的專案框架搭建及填坑方案。

搭建可以參考我的另一篇文章vue-cli 3.0 搭建專案流程,這裡就不再另外說明了。下面說明專案搭建成功後的適配方案。

第一部分:專案中引入lib-flexible

一、專案中安裝lib-flexible

npm install lib-flexible --save 二、在專案的入口main.js檔案中引入lib-flexible

import 'lib-flexible' 第二部分:使用postcss-px2rem自動將css中的px轉換成rem

一、安裝postcss-px2rem (一定看完文章再安裝不然你會哭o(╥﹏╥)o)

npm install postcss-px2rem --save-dev 二、專案配置postcss

專案開始我是在vue.config.js(專案建立完初始是沒有這個js檔案的,需要自己手動建立)中配置的,上程式碼

複製程式碼 module.exports = { css: { loaderOptions: { postcss: { // 這是rem適配的配置 注意: remUnit在這裡要根據lib-flexible的規則來配製,如果您的設計稿是750px的,用75就剛剛好。 plugins: [ require("postcss-px2rem")({ remUnit: 75 }) ] } } } 複製程式碼 初始的適配方案就完成了,然後可以直接在css或.vue檔案中寫已px為單位的樣式了,到瀏覽器會自動轉為rem。

因為前期專案安排不是太趕,ui給的設計圖也相對簡單,所以自己寫了按鈕元件之類的,適配還挺好,覺得自己棒棒噠~

直到ui的後續設計圖出現時間外掛,然後就引入了vant的元件庫。

放了一個簡單的cell元件,npm run serve專案跑起來,我想哭o(╥﹏╥)o,元件中的樣式都變小了,F12看了一下果然元件的樣式也都被轉換成了rem。

問題

變小的主要原因是第三庫 css一依據 data-dpr="1" 時寫的尺寸

這時我們使用的flexible引入時 data-dpr不是一個寫死了的,是一個動態的;就導致這個問題

然後就各種查解決方案,網路上給的解決方案一個是改寫第三方庫的樣式,還有一個就是讓flexible不編譯第三方庫的檔案(忽略ui元件庫的樣式檔案)。

解決方案一: 將第三方元件的css檔案複製出來第三方庫的css程式碼px統一擴大2倍,或者用全域性替換將px替換為px/no/。我覺的這個方案不太好沒有采用,具體操作可以參考以下兩篇文章:segmentfault.com/a/119000001…blog.csdn.net/weixin_4246…

解決方案二: 使用postcss-px2rem-exclude,網上好多說用這個方法不起作用,經過一個下午的折騰才發現是使用方法不對,我的錯誤方法就不跟你們說了,直接來正確的。 首先,需要解除安裝專案中的postcss-px2rem。 npm uninstall postcss-px2rem --save-dev 其次,安裝postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save 最後是配置exclude選項,需要注意的是這個配置在vue.config.js中式不起作用的,如圖。

正確的配置位置是專案根目錄下的postcss.config.js檔案,如果你的專案沒有生成這個獨立檔案,就需要在你的package.js裡設定。

複製程式碼 postcss.config.js

module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { remUnit: 75, exclude: /node_modules|folder_name/i } } }; 複製程式碼 複製程式碼 package.json

"postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclude":{ "remUnit": 75, "exclude":"/node_modules|floder_name/i" } } }, 複製程式碼 ok,完成。

以上就是我這個專案的填坑經歷,希望對你有用,能少走點彎路 o(^@^)o

相關文章