vue页面自适应 动态 postcss postcss-pxtorem

本文主要是介绍vue页面自适应 动态 postcss postcss-pxtorem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景：vue2做的页面，希望可以根据浏览器分辨率动态调整页面元素大小

postcss一款灵活配置css的插件，而postcss-pxtorem是属于postcss中的小工具可以动态将页面px转换为rem，现使用postcss-pxtorem实现页面自适应效果

postcss-pxtorem实现页面自适应

1、安装postcss-pxtorem

npm install postcss-pxtorem --s

2、根目录创建postcss.config.js，并配置以下内容

module.exports = {plugins: {"postcss-pxtorem": {rootValue: 16, // 根元素字体大小，用于将像素转换为rem的基准值unitPrecision: 5, // rem的小数位数propList: ["*"], // 需要转换的属性列表，['*']表示所有属性都会被转换。selectorBlackList: [], // 需要忽略的选择器，可以是正则表达式或字符串replace: true, // 是否替换原始值mediaQuery: false, // 是否在媒体查询中转换px。minPixelValue: 0 // 小于或等于该值的像素单位不被转换。}}
};

3、创建rem.js，动态设置root px

// 设置 rem 函数
function setRem() {// 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16 这里是16就是初始化根元素px大小const screenWidth = 1920const scale = screenWidth / 16const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlWidth / scale + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', ()=>{setRem()
})

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

import '@/utils/rem.js'

此时打开调试工具会发现px已经全部被转换为rem，也基本可以实现页面自适应变化了

注：postcss-pxtorem无法将内联样式转换为rem，此时需要额外单独处理

5、在main.js中创建全局处理函数px2rem

function px2rem(px){if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%return px}else{return (parseFloat(px) / 16) + 'rem' // 这里的16就是初始化根元素px大小}
}
Vue.prototype.$px2rem = px2rem // 放到全局

6、对内联样式使用px2rem

<span :style="{'margin-left': $px2rem('20px')}">内联样式</span>

到此结束，页面基本可以实现自适应！！！
若部分元素无法自适应，则可能是没有设置width、height

这篇关于vue页面自适应 动态 postcss postcss-pxtorem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---