公司最近做的一個移動端項目從搭框架到前端開發由我獨立完成,以前做移動端適配用的媒體查詢,這次想用點別的適配方案,然后就采用了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" 時寫的尺寸
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
這時我們使用的flexible引入時 data-dpr不是一個寫死了的,是一個動態的;就導致這個問題
然后就各種查解決方案,網絡上給的解決方案一個是改寫第三方庫的樣式,還有一個就是讓flexible不編譯第三方庫的文件(忽略ui組件庫的樣式文件)。
解決方案一:
將第三方組件的css文件復制出來第三方庫的css代碼px統一擴大2倍,或者用全局替換將px替換為px/*no*/。我覺的這個方案不太好沒有采用,具體操作可以參考以下兩篇文章:https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。
解決方案二:
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
再補充:
最近在用vuecli3.x搭建項目 安裝了postcss-px2rem但是影響了ui組件的樣式,網上的方法都試過,總結下
1. postcss-px2rem不能忽略指定文件 需要安裝postcss-px2rem-exclude(安裝前需要先卸載postcss-px2rem)
npm uninstall postcss-px2rem
npm i postcss-px2rem-exclude -D
2. 在項目搭建的時候要選擇配置文件的位置了。
對於 Babel 、 PostCSS 等,都可以有自己的配置文件: .babelrc 、 .postcssrc 等等
或者也可以把配置信息放在 package.json 里面
3. 要是選擇獨立配置文件的 直接在根目錄下 postcss.config.js內修改
exclude 就是要忽略的文件

4. 最坑的就是你選的配置信息都放在 package.json 里面
我參照網上的方法 把配置放在package.json 根本無效

之后我查看了postcss-px2rem-exclude 的源碼,發現在package.json中加入的配置傳過去的是 "/node_moudules/i"是字符串,並不是正則表達式,所以根本無效,我自己試了2中方法均有效

第一種: 就是刪除package.json 中關於postcss的配置
然后在根目錄下新建postcss.config.js,把package.json中的postcss配置放到postcss.config.js
同3
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
"remUnit": 32,
"exclude": /node_modules/i
}
}
}
第二種 就是修改postcss-px2rem-exclude 源碼
/node_modules/postcss-px2rem-exclude/lib/index.js 文件 增加如下內容,即可

在移動端開發中,常常會用到rem相對單位來做自適應。最常用到一種方法就是使用lib-flexible和px2rem來做到自動轉換px單位。具體方法參考上一篇文章(px2rem-loader(Vue:將px轉化為rem,適配移動端))。
相對缺陷
但是,這個方法是有缺陷的,當引入第三方UI庫時,會發現第三方的UI庫的樣式也自動轉化成rem了。所以樣式會變小。


解決方法:
其實解決方法很簡單,讓其不轉化成rem就可以了。但是怎么做到呢,請往下看。
使用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.jsmodule.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"
}
}
},
最后別忘了把之前配置過的信息刪掉。在build-utils.js下,如圖:


ok,完成。
以上就是我這個項目的填坑經歷,希望對你有用,能少走點彎路 o(*^@^*)o
.