Vant+postcss-pxtorem 实现浏览器适配功能

Rem 布局适配
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
看到最后有惊喜!

一、npm安装

npm install postcss-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

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()}
    

四、在main.js中引入rem.js

import "./rem.js"

至此，Vant+postcss-pxtorem 实现浏览器适配就完成了。
即可直接在样式中畅快的使用px且自动转换成rem。
等等先别走！！！客官。
以为到这里就结束了吗?NO,往下看还有一份不基于postcss-pxtorem 来实现的rem适配哦。
话不多说直接上代码。

五、新建rem.js并再main.js中引入

(function (doc, win) {
 VAR docEl = doc.documentElement var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' var recalc = function () {
      var clientWidth = 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 适配内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue中rem与postcss-pxtorem的应用详解
• 关于vue利用postcss-pxtorem进行移动端适配的问题
• vue3.0中使用postcss-pxtorem的具体方法
• 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
• 使用Vant完成Dialog弹框案例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！