vue 移動端rem與px的全局配置

一般手機端的設計稿都是以750px為基準來做的,前端開發拿到設計稿開始寫頁面需要考慮各個型號的機型的適配。如果你使用uniapp來做移動端的頁面,你可以直接以750px為基準來畫頁面,uniapp已經處理好了坐標轉換,下面的文章內容僅作了解。
但是普通的vue-cli生成的工程并沒有處理坐標轉換,你按照750px的設計稿寫出來的頁面在很多手機上跑起來會變形。
當然了,為了適配不同的機型你可以用flex布局或者百分比,但是算來算去不煩嗎,我就想在css樣式里面按照設計稿的寬高寫頁面還能適配所有機型,這樣多舒服。

rem

rem是CSS3新增的一個相對單位rem(root em,根em。
rem是相對于根節點或者是html節點。
舉個例子:
如果手機屏幕寬度是750px,根節點設置了font-size:100px,那么手機屏幕寬度就是7.5rem(750/100)。
rem布局不多贅述,有很多詳細說明rem布局原理的資料。

本文的核心就是,通過JS獲取設備寬度動態設定rem值,以實現在不同寬度的頁面中使用rem作為單位的元素自適應的效果。

直接上代碼吧:

新建rem.js文件,在main.js中引用
(function(window, document) {
    function resize() {
        var ww = window.innerWidth;
        //設計稿以750為寬度,我們把頁面寬度設計為 7.5rem
        //baseSize就是postcss.config.js 里面設置的 rootValue 值,這個是設計稿中1rem轉換成px的大小
        const baseSize = 100;
        //實際設備頁面寬度和設計稿的比值
        const scale = ww / 750;
        //計算實際的rem值并賦予給html的font-size
        document.documentElement.style.fontSize = (baseSize * scale) + 'px';
    }
    if (document.readyState !== 'loading') {
        resize();
    } else {
        document.addEventListener('DOMContentLoaded', resize);
    }
    window.addEventListener('resize', resize);
})(window, document);

postcss-pxtorem

postcss-pxtorem是PostCSS的插件,用于將像素單元生成rem單位。

安裝 postcss-pxtorem

npm install postcss-pxtorem --save-dev

這樣安裝可能會有問題
npm WARN postcss-pxtorem@6.0.0 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
網上的說法是postcss-pxtorem版本過高。
所以建議直接在package.json文件的devDependencies指定版本

 postcss-pxtorem": "^5.1.1

配置示例,三種方式:
vue.config.js

module.exports = {
  //...其他配置
  css: {
   loaderOptions: {
    postcss: {
     plugins: [
      require('postcss-pxtorem')({
       rootValue: 100,
       minPixelValue: 2,
       propList: ['*'],
      })
     ]
    }
   }
  },
 }

.postcssrx.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100,
      minPixelValue: 2,
      propList: ['*'],
    }
  }
}

postcss.config.js (建議用這種方式)

module.exports = {
 plugins: {
  'postcss-pxtorem': {
   rootValue: 100,
   minPixelValue: 2,
   propList: ['*'],
  }
 }
}

以上配置的屬性中最重要的是這個:
rootValue (Number)
根元素的值,即1rem的相對應的px值
比如 rootValue = 100時,在css中width:300px; 最終會換算成width:3rem;
還有一些其他的配置:

propList (Array) 需要做單位轉化的屬性
必須精確匹配

  • 用 * 來選擇所有屬性. Example: ['*']
  • 在句首和句尾使用 * (['position'] 會匹配 background-position-y)
  • 使用 ! 來配置不匹配的屬性. Example: ['*', '!letter-spacing']
  • 組合使用. Example: ['', '!font']

minPixelValue(Number) 可以被替換的最小像素
unitPrecision(Number) rem單位的小數位數上限

github: 代碼
網盤: 代碼 密碼: nb4k

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容