温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用Vant+postcss-pxtorem 怎么实现一个浏览器适配功能

发布时间:2021-02-05 15:18:11 来源:亿速云 阅读:347 作者:Leah 栏目:开发技术

今天就跟大家聊聊有关使用Vant+postcss-pxtorem 怎么实现一个浏览器适配功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

一、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()
// 改变窗口大小时重新设置 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) {
 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 怎么实现一个浏览器适配功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI