Vant+postcss-pxtorem 实现浏览器适配功能
Rem布局适配
Vant中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：
postcss-pxtorem是一款postcss插件，用于将单位转化为rem
lib-flexible用于设置rem基准值
看到最后有惊喜!
一、npm安装
npminstallpostcss-pxtorem--save
二、新建.postcssrc.js做如下修改
注：
1、以下注释代码开启后运行脚本会出现报错的提示,虽不知道有什么用,注释就好啦。
module.exports={
"plugins":{
//"postcss-import":{},
//"postcss-url":{},
"autoprefixer":{
browsers:['Android>=4.0','iOS>=7']
},
"postcss-pxtorem":{
"rootValue":32,
"propList":["*"]
}
}
}
三、新建rem.js
constbaseSize=32
//设置rem函数
functionsetRem(){
//当前页面宽度相对于750宽的缩放比例，可根据自己需要修改。
constscale=document.documentElement.clientWidth/750
//设置页面根节点字体大小
document.documentElement.style.fontSize=(baseSize*Math.min(scale,2))+'px'
}
//初始化
setRem()
//改变窗口大小时重新设置rem
window.onresize=function(){
setRem()
}
四、在main.js中引入rem.js
import"./rem.js"
至此，Vant+postcss-pxtorem实现浏览器适配就完成了。
即可直接在样式中畅快的使用px且自动转换成rem。
等等先别走！！！客官。
以为到这里就结束了吗?NO,往下看还有一份不基于postcss-pxtorem来实现的rem适配哦。
话不多说直接上代码。
五、新建rem.js并再main.js中引入
(function(doc,win){
vardocEl=doc.documentElement
varresizeEvt='orientationchange'inwindow?'orientationchange':'resize'
varrecalc=function(){
varclientWidth=docEl.clientWidth
if(!clientWidth)return
if(parseInt(20*(clientWidth/320))>35){
docEl.style.fontSize=35+'px'
}else{
docEl.style.fontSize=20*(clientWidth/320)+'px'
}
}
if(!doc.addEventListener)return
win.addEventListener(resizeEvt,recalc,false)
doc.addEventListener('DOMContentLoaded',recalc,false)
})(document,window)
import"./rem.js"
六、添加样式全局变量并使用
//当前页面宽度相对于750宽的缩放比例，可根据自己需要修改。
$rem:(640/750)/40;
body{
width:$rem*24rem;
}
到此这篇关于Vant+postcss-pxtorem实现浏览器适配的文章就介绍到这了,更多相关Vant+postcss-pxtorem适配内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！