VUE 移動端適配——px2rem 和 postcss-pxtorem

關於VUE移動端適配rem

博主總結了兩種高效的方法：

此方案是藉助兩個插件，將px進行轉化爲rem。

• lib-flexible 用於設置 rem 基準值。由淘寶手機前端開發團隊編寫的。
• postcss-pxtorem 是一款 postcss 插件，用於將css單位轉化爲 rem。

一、 lib-flexible 配置步驟

1. 安裝依賴 lib-flexible

   cnpm install --save lib-flexible

2. 在main.js中導入：

   import 'lib-flexible/flexible'

3. 安裝依賴 px2rem-loader

   cnpm install --save px2rem-loader

4. 將px2rem-loader添加到cssLoaders

   在build/util.js中添加如下配置
   
   附代碼：

   const px2remLoader = {
       loader: 'px2rem-loader',
       options: {
         remUnit: 75//這個是重點，設計稿是750px
       }
     }
   const loaders = [cssLoader,px2remLoader]
   

二、postcss-pxtorem 配置步驟

1. 安裝依賴 postcss-pxtorem
   cnpm install postcss-pxtorem --save-dev

2. 在vue-cli2下，根目錄中的 .postcss.js (沒有新建即可)，添加如下代碼：
   

   附代碼：

   module.exports = {
     "plugins": {
       "postcss-import": {},
       "postcss-url": {},
       // to edit target browsers: use "browserslist" field in package.json
       "autoprefixer": {},
       "postcss-pxtorem": { // 此處爲添加部分
         rootValue: 100, // 換算基數，默認100，把根標籤的font-size規定爲1rem爲50px,在設計稿上量出多少px直接在代碼中寫多少px
         unitPrecision: 5,  //保留rem小數點多少位
         propList: ['*', '!border', '!font-size'], //  存儲將被轉換的屬性列表，'!font-size' 即不對字體進行rem轉換
         selectorBlackList: ['.radius'], // 要忽略並保留爲px的選擇器，例如fs-xl類名，裏面有關px的樣式將不被轉換，支持正則寫法。
         replace: true,
         mediaQuery: false,//（布爾值）媒體查詢( @media screen 之類的)中不生效
         minPixelValue: 12,///設置要替換的最小像素值，px小於12的不會被轉換
         //propWhiteList: [],  //默認值是一個空數組，這意味着禁用白名單並啓用所有屬性
         propBlackList: ['font-size'], //黑名單
       }
     }
   }
   

3. vue-cli3中,在根目錄中 vue.config.js (沒有新建即可)，添加如下代碼：

   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           plugins: [
             require('postcss-pxtorem')({ // 把px單位換算成rem單位
               rootValue: 37.5, // 換算的基數(設計圖750的根字體爲32)
               selectorBlackList: ['weui', 'mu'], // 忽略轉換正則匹配項
               propList: ['*']
             })
           ]
         }
       }
     }
   }
   

4. 新建一個rem.js，切換頁面時動態更新html，即根標籤的font-size,添加如下代碼
   
   附代碼：

   (function (window, document) {
       // 設置 rem 函數
       function remLayout() {
           // 獲取屏幕寬度
           let ww = document.documentElement.clientWidth || document.body.clientWidth;
           // 限制屏幕寬度
           ww = ww > 768 ? 768 : ww;
           ww = ww <= 320 ? 320 : ww;
           /*  以設計稿分辨率爲基準，取100px爲font-size的參照，    75px 
               那麼設計稿的寬如果是750，body元素的寬度就可以設置爲width:7.5rem（750/100），   
               當我們將佈局視口設置爲375時，於是html的font-size=deviceWidth / 7.5。
           */
           document.documentElement.style.fontSize = ww / 7.5 + 'px';
       }
       // 初始化
       remLayout()
       // 改變窗口大小時重新設置 rem
       window.addEventListener('resize', remLayout, false);
   })(window, document);
   

5. 在main.js中導入rem.js

   import './rem.js'
   

附postcss-pxtoremgithub地址：postcss-pxtorem

三、配置完就可以直接用px做單位按照750的設計稿擼代碼了！！！

PS ： 圖片作用，僅爲方便查看代碼
最後，獻上福利 —— JS 常用插件: 下拉刷新、上拉加載，左右滑動，移動端調試，圖片預覽、放大縮小、旋轉.

如果感覺對你有幫助，那就收藏❤❤吧！