vue px转rem怎么配置

本篇内容主要讲解"vue px转rem怎么配置"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue px转rem怎么配置"吧!

方法一

一、配置与安装步骤：

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    }  }
//在generateLoaders方法中添加px2remLoader1const 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外联样式不会被转化，注意避开这些坑。

方法三

第一步 安装 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: ['*']    }  }}

到此，相信大家对"vue px转rem怎么配置"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！