本文主要讲解“如何将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