本文主要讲解“如何将vuepx配置为rem”，感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“如何配置vuepx到rem”！
00-1010
方法一
1.在Vue项目的src文件夹下创建一个配置文件夹：
2.在配置文件夹中创建rem.js:
3.将以下代码复制到rem.js:
//基本尺寸
constbaseSize=32
//设置rem函数
functionsetRem(){ 0
//当前页面宽度相对于750宽度的缩放比例可以根据自己的需要进行修改。
const scale=document . document element . client width/750
//设置页面根节点的字体大小
document . document element . style . font size=(base size * math . min(scale，2)) 'px '
}
//初始化
setRem()
//更改窗口大小时重置rem
window . onresize=function(){ 0
setRem()
}4.介绍：
“进口”。/config/rem'5。介绍：
D6。将以下内容添加到Vue项目文件夹中的postss . config . js:
module . exports={ 0
plugins:{
autoprefixer: { }，
postss-pxtorem ' : {
根值' :16，
prop list ' :[' *]
}
}
}
一、配置与安装步骤：
第一步是安装lib-flexible
npmilib-灵活-保存保存步骤2安装px2mrem-加载程序
第三步是引入lib-flexible。
导入“lib-flexible/flexible”第四步也是最重要的一步是配置utils文件。
constpx2 remloader={ 0
装载机： ' px2 rem-装载机'，
选项：{
remUnit:37.5
}
}br//将px2remLoader添加到generateLoaders方法中。
一个
ConstLoaders=[CSS loader，px2xremloader]或者第四步：如果没有“vue.config.js”(目录： hello-world/vue.config.js)创建新的“vue.config.js”文件
module . exports={ 0
chainWebpack:(配置)={ 0
配置模块。规则(' css ')。测试(/\。css$/)。oneOf('vue ')。resourceQuery(/\？vue/)。使用(' px2rem ')。装载机(' px2 rem-装载机')。选项({ 0
RemUnit:75//75代表750的设计草案，37.5代表375的设计草案。
})
}
}1.按照px写会转换成rem，但是有些地方我们不想转换，可以用下面两种方法。
在px后添加/no/不会转换px，但会按原样输出。-border通常需要这个。
在px之后添加/px/会根据不同的dpr生成三组代码。-一般字体需要这个。
2使用过程中发现部分进口外展款式不会转换，注意避开这些坑。
stylesrc='./assets/style.css '
/*px2rem可以正常转换*/
/style
风格
/*px2rem无法正常转换*/
@import./assets/style . CSS '；
/style
风格
/*px2rem无法正常转换*/
@importurl('./assets/style . CSS ')；
/style
方法二
第一步是安装amfe-柔性
安装后支架
第三步是引入amfe-flexible。
导入' amfe-flexible '步骤4，在根目录下创建postss . config . js文件。
module . exports={ 0
plugins:{
postss-pxtorem ' : {
根值：37.5，
proprist :[“*”]
}
}
}至此，相信大家对“如何将vuepx配置到rem”有了更深的理解，下面就来一个实操吧！这是网站。更多相关内容，可以去相关渠道查询，关注我们，继续学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/140962.html