怎么在vue中对rem进行配置

本篇文章为大家展示了怎么在vue中对rem进行配置，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

1、在js中统一计算配置

代码如下：

exportdefaultfunction(){
//vardevicePixelRatio=1;
//varscale=1/devicePixelRatio;
//document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
//7.5根据设计稿的横向分辨率/100得来
//alert(document.documentElement.clientWidth)
vardeviceWidth=document.documentElement.clientWidth;
//vardeviceWidth=window.screen.availWidth
//alert(navigator.userAgent)
//alert(deviceWidth)
//console.log(navigator.userAgent)
if(deviceWidth>750){
//deviceWidth=750;
deviceWidth=7.5*50;
}

document.documentElement.style.fontSize=deviceWidth/7.5+'px';

//禁止双击放大
document.documentElement.addEventListener('touchstart',function(event){
if(event.touches.length>1){
event.preventDefault();
}
},false);
varlastTouchEnd=0;
document.documentElement.addEventListener('touchend',function(event){
varnow=Date.now();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false);
}

然后在main.js中引入使用。

结构

main.js

然后在index.css中设置默认大小：

基础css

index.scss一般也在main.js里面引入:

main.js

2、借助px2rem 插件

安装

npminstallpx2rem-loaderlib-flexible--save

在项目入口文件main.js中引入lib-flexible

import'lib-flexible/flexible.js'

在build下的 utils.js中，找到generateLoaders 方法，在这里添加 。

constpx2remLoader={
loader:'px2rem-loader',
options:{
remUnit:37.5
}
}

functiongenerateLoaders(loader,loaderOptions){
constloaders=[cssLoader,px2remLoader]
if(loader){
loaders.push({
loader:loader+'-loader',
options:Object.assign({},loaderOptions,{
sourceMap:options.sourceMap
})
})
}

重启项目，会发现自己设置的px被转为rem 了

效果

以上实现转换适用于：

（1）组件中编写的下的css

（2）从index.js或者main.js中import ‘../../static/css/reset.css'引入css

（3）在组件的中引入css

另外的情况不适用：

（1）组件中@import “../../static/css/reset.css (可考虑上面（2）、（3）的形式引入)

（2）外部样式:

（3）元素内部样式：style=”height: 417px; width: 550px;”

上述内容就是怎么在vue中对rem进行配置，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注恰卡编程网行业资讯频道。