本篇内容主要讲解“vue px转rem怎么配置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue px转rem怎么配置”吧!
方法一
一、配置与安装步骤:
在 Vue 项目的 src 文件夹下创建一个 config 文件夹:
在 config 文件夹中创建 rem.js:
将以下代码复制到 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()// 改变窗口大小时重新设置 remwindow.onresize = function () { setRem()}
在 src 文件夹下的 main.js 中引入:
import './config/rem'
在 Vue 项目根目录终端引入:
npm install postcss-pxtorem -D
在 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方法中添加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的设计稿 }) } }
按照px来编写都会转化成rem的形式,但是有些地方我们不想转换,可以用下面两种方法。
在px后面添加/no/,不会转化px,会原样输出。 — 一般border需用这个
在px后面添加/px/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个
2 使用过程中,发现某些import外联样式不会被转化,注意避开这些坑。
<style src='../assets/style.css'> </style><style> @import '../assets/style.css';</style><style> @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: ['*'] } }}
到此,相信大家对“vue px转rem怎么配置”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!