vue项目自适应屏幕分辨率实现步骤
作者：毛三仙
这篇文章主要给大家介绍了关于vue项目自适应屏幕分辨率实现的相关资料,作为前端人员,为了适配各种型号的电脑、手机,我们往往离不开屏幕分辨率的适配,需要的朋友可以参考下
npm install postcss-px2rem px2rem-loader --save
在根目录src中新建utils目录下新建rem.js等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}3、在main.js中引入适配文件
import "./utils/rem.js"; // 自适应分辨率
4、到vue.config.js中配置插件
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16
})
// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}*********************************** 第二种（大屏可用）***********************************
在外层文件中（包含所有的子组件）
onWindowResize() {
const w = 1920
const h = 1080
const scaleW = document.body.clientWidth / w
const scaleH = document.body.clientHeight / h
const appDom = document.querySelector(".main") || null
console.log(appDom)
appDom.style.cssText = `transform: scale(${scaleW})`
// appDom.style.cssText = `transform: scale(${scaleW}, ${scaleH})`;
}
mounted() {
this.onWindowResize()
setTimeout(() => {
this.onWindowResize()
}, 100)
},
created() {
// 设置每隔 3minute 更新页面数据
window.setInterval(() => {
this.timer = setTimeout(() => {
this.reLoadPage();
}, 0)
}, 1000 * 60 * 3);
window.addEventListener('resize', this.onWindowResize)
},
destroyed() {
window.removeEventListener('resize', this.onWindowResize)
}总结
到此这篇关于vue项目自适应屏幕分辨率实现的文章就介绍到这了,更多相关vue自适应屏幕分辨率内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！