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" 時寫的尺寸

<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。

解決方案二:

使用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

 

再補充:

最近在用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

 
 
 

 

 

.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM