介绍 npm install postcss-pxtorem ——保存 module.exports =, {
,“plugins": {
,//皃ostcss-import": {},//才能“postcss-url":, {},
“autoprefixer"才能:,{
,,,浏览器:[& # 39;Android 祝辞=,4.0 & # 39;,,& # 39;iOS 祝辞=,7 & # 39;】
,,},
“postcss-pxtorem"才能:,{
,才能“rootValue":, 32岁
,才能“propList":, (“*”)
,,}
,}
} const baseSize =32//,设置,rem 函数
function setRem (), {
,//当前页面宽度相对于,750,宽的缩放比例,可根据自己需要修改。
,const scale =document.documentElement.clientWidth /, 750
,//设置页面根节点字体大?,document.documentElement.style.fontSize (baseSize *, Math.min(规模,,2)),+,& # 39;px # 39;
}//,初始化
setRem ()//,改变窗口大小时重新设置,快速眼动
时间=window.onresize function (), {
,setRem ()
} import “。/rem.js" (function (医生,,赢),{
,var docEl =doc.documentElement
,var resizeEvt =, & # 39; orientationchange& # 39;, window ?拷贝,& # 39;orientationchange& # 39;,:, & # 39;调整# 39;
,var recalc =, function (), {
var 才能;clientWidth =docEl.clientWidth
if 才能;(! clientWidth),返回
if 才能;(方法(20,*,(clientWidth /, 320)),祝辞,35),{
,,docEl.style.fontSize =, 35, +, & # 39; px # 39;
,,},{else
,,docEl.style.fontSize =, 20, *,(时间/clientWidth 320), +, & # 39; px # 39;
,,}
,}
,if (! doc.addEventListener),返回
,win.addEventListener (resizeEvt, recalc,,假)
,doc.addEventListener (& # 39; DOMContentLoaded& # 39;,, recalc,,假)
})(文档,窗口)
import “。/rem.js" //,当前页面宽度相对于,750,宽的缩放比例,可根据自己需要修改。
雷:美元,(640/750)/40;
身体{
宽度:rem 美元;*,24眼动;
}
今天就跟大家聊聊有关使用Vant + postcss-pxtorem怎么实现一个浏览器适配功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
一、npm安装
二,新建.postcssrc。js做如下修改
注:
1,以下注释代码开启后运行脚本会出现报错的提示,虽不知道有什么用,注释就好啦。
三、新建快速眼动。js
四,在main.js中引入快速眼动。js
至此,Vant + postcss-pxtorem实现浏览器适配就完成了。
即可直接在样式中畅快的使用px且自动转换成快速眼动。
等等先别走! ! !客官。
以为到这里就结束了吗?不,往下看还有一份不基于postcss-pxtorem来实现的rem适配哦。
话不多说直接上代码。
五、新建rem.js并再主要。js中引入
六,添加样式全局变量并使用
看完上述内容,你们对使用Vant + postcss-pxtorem怎么实现一个浏览器适配功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
