客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
Rem 布局适配 一、npm安装npm install postcss-pxtorem --save 二、新建.postcssrc.js做如下修改注：
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.jsimport "./rem.js" 至此，Vant+postcss-pxtorem 实现浏览器适配就完成了。 五、新建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 适配内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论