[Vue筆記] 使用 postcss-px2rem 自動將專案中的 px 轉為 rem

如果有手機端瀏覽網頁的需求,通常會使用rem來寫 UI,而設計圖上一般都是以px為單位,所以切版的時候我們會需要自行將px轉到rem。postcss-px2rem 這個套件就是用於將專案中的 px 轉為 rem,並且它可以設置 exclude 屬性,所以如果你有使用 UI組件庫的話可以排除轉換組件庫中的 px。

準備工作

  • 以下內容以 vue cli2 為主
STEP 1

首先需要安裝 postcss-px2rem 及 px2rem-loader:

npm install postcss-px2rem px2rem-loader --save
STEP 2

接著在 vue.config.js 中添加 postcss-px2rem 的配置內容:

const px2rem = require("postcss-px2rem");

const postcss = px2rem({
    // baseSize 基準大小,需要和 rem.js 中相同
    remUnit: 16
});

module.exports = {
    // ...
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    }
}
STEP 3

新建 utils/rem.js 用於根據不同的螢幕解析度做 rem 的自適應:

// 基準大小
const baseSize = 16;

function setRem () {
  // 當前頁面寬度相對於 1920px 的縮放比例,可根據自己需要修改
  const scale = document.documentElement.clientWidth / 1920;
  // 設定頁面根節點字型大小(Math.min(scale, 2): 指最高放大比例為2,可根據實際業務需求調整)
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px';
}

// init
setRem();

// 改變視窗大小時重新設定 rem
window.onresize = function () {
  setRem();
}
STEP 4

在 main.js 中引入 rem.js:

import "./utils/rem";

使用方式

在專案中使用 px 就會自動轉換為 rem,如果個別地方不想被自動轉換成 rem 的話可以將 px 改為 PX 或者 Px

.view {
  font-size: 25px; // --> font-size: 0.25rem; (25 / 基准值)
  // font-size: 25PX; // 不自動轉換成 rem
}
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論