vue px轉rem配置詳解

Posted on by

方法一

一、配置與安裝步驟：

1、在 Vue 項目的 src 文件夾下創建一個 config 文件夾：

2、在 config 文件夾中創建 rem.js：

在這裡插入圖片描述

3、將以下代碼復制到 rem.js 中：

// 基準大小
const baseSize = 32
// 設置 rem 函數
function setRem () {
  // 當前頁面寬度相對於 750 寬的縮放比例，可根據自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 設置頁面根節點字體大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem()
}

4、在 src 文件夾下的 main.js 中引入：

import './config/rem'

5、在 Vue 項目根目錄終端引入：

npm install postcss-pxtorem -D

6、在 Vue 項目文件夾下的 postcss.config.js 中加入：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 16,
      "propList": ["*"]
    }
  }
}

方法二

第一步 安裝 lib-flexible

npm i lib-flexible --save

第二步 安裝 px2rem-loader

npm install px2rem-loader --save-dev

第三步 引入lib-flexible

import 'lib-flexible/flexible'

第四步 最重要的一步 配置utils文件

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }<br>//在generateLoaders方法中添加px2remLoader
1
const loaders = [cssLoader,px2remLoader]

或者第四步：Create new “vue.config.js” file if without “vue.config.js” (目錄: hello-world/vue.config.js)

module.exports = {
     chainWebpack: (config) => {
         config.module
         .rule('css')
         .test(/\.css$/)
         .oneOf('vue')
         .resourceQuery(/\?vue/)
         .use('px2rem')
         .loader('px2rem-loader')
         .options({
             remUnit: 75 // 75表示750的設計稿，37.5表示375的設計稿
         })
     }
 }

1.按照px來編寫都會轉化成rem的形式，但是有些地方我們不想轉換，可以用下面兩種方法。

在px後面添加/no/，不會轉化px，會原樣輸出。 — 一般border需用這個
在px後面添加/px/,會根據dpr的不同，生成三套代碼。—- 一般字體需用這個

2 使用過程中，發現某些import外聯樣式不會被轉化，註意避開這些坑。

<style src='../assets/style.css'>
 /* px2rem能正常轉換 */
</style>

<style>
  /* px2rem不能正常轉換 */
  @import '../assets/style.css';
</style>

<style>
  /* px2rem不能正常轉換 */
  @import url('../assets/style.css');

</style>

方法三

第一步 安裝 amfe-flexible

npm i amfe-flexible -S

第二步 安裝 postcss-pxtorem

npm install postcss-pxtorem --save-dev

第三步 引入amfe-flexible

import 'amfe-flexible'

第四步根目錄下創建postcss.config.js文件

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：