vue屏幕适配方案

1.创建一个a.js // 屏幕适配 mixin 函数 // * 默认缩放值 const scale = { width: '1', height: '1', } // * 设计稿尺寸（px） const baseWidth = 1920 const baseHeight = 1080 // * 需保持的比例（默认1.77778） const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) export default { data() { return { // * 定时函数 drawTiming: null } }, mounted () { this.calcRate() window.addEventListener('resize', this.resize) }, beforeDestroy () { window.removeEventListener('resize', this.resize) }, methods: { calcRate () { const chartHomeRef = this.refs["chartHomeRef"] if (!chartHomeRef) return // 当前宽高比 const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5)) if (chartHomeRef) { if (currentRate > baseProportion) { // 表示更宽 scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) scale.height = (window.innerHeight / baseHeight).toFixed(5) chartHomeRef.style.transform = `scale({scale.width}, {scale.height}) translate(-50%, -50%)` } else { // 表示更高 scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5) scale.width = (window.innerWidth / baseWidth).toFixed(5) chartHomeRef.style.transform = `scale({scale.width}, {scale.height}) translate(-50%, -50%)` } } }, resize () { clearTimeout(this.drawTiming) this.drawTiming = setTimeout(() => { this.calcRate() }, 200) } }, } ............................. 在main.js中，引入a.js文件 在vue.config.js中配置插件 // // 引入等比适配插件 const px2rem = require("postcss-px2rem"); // 配置基本大小 const postcss = px2rem({ //配置rem基准值 基准大小 baseSize remUnit: 192, // 设计稿尺寸1920/10 }); module.exports = { chainWebpack: (config) => { config.module .rule("css") .test(/\.css/) .oneOf("vue") .use("px2rem-loader") .loader("px2rem-loader") .options({ remUnit: 192, remPrecision: 8, }) .end(); }, css: { loaderOptions: { postcss: { plugins: [postcss] }, }, }, }