Vue项目如何改变屏幕尺寸重新刷新页面-计算页面尺寸_vue.js_

npm install postcss-px2rem px2rem-loader --save

// 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() } 

import './util/pxtorem'

// 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({   // 基准大小 baseSize，需要和rem.js中相同   remUnit: 16 }) // 使用等比适配插件 module.exports = {   lintOnSave: true,   css: {     loaderOptions: {       postcss: {         plugins: [           postcss         ]       }     }   } }

module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', // 需要转换的单位，默认为"px" viewportWidth: 1920, // 设计稿的视口宽度 unitPrecision: 5, // 单位转换后保留的精度 propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: [/node_modules/, /LargeScreen/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件,数组中写正则 include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1920, // 横屏时使用的视口宽度 }, }, };