适用设备：pc端/移动端
适配策略：动态rem+动态scale
方案效果：可让页面在不同屏幕下、放大缩小时保持页面不变形
效果示例：
当屏幕变化时： 
当放大缩小时：
安装(屏幕适配插件)
npm i screen-adapter-plugin
适配写法(推荐)：
写class样式时，使用px单位，class内的px单位编译后会转成rem；内联样式需要用px函数px(12)转为rem，px函数已经挂载在Vue的this上。若想让class样式不被转为rem，可使用.norem-开头的class名称，其大括号范围内所有样式不会被转为rem，或使用大写的PX单位(需要按文档配置postcss.plugin)rem只随视口的宽度动态调节，若想让元素高度随视口高度变化，可使用vh、%或其他单位内部无法转为rem的插件，例如echarts、relation-graph等，可在元素上绑定v-scale。
v-scale适合内部没有rem单位的元素，通过transform的scale属性让该元素宽高随视口的宽度自适应。
它还可以传入一个监听函数，第一个参数为绑定该指令的元素dom，第二个参数为该元素被放大的倍数，其在视口变化时会自动执行
<div ref="echartsRef" style="width: 500px;height: 400px;" v-scale></div> <div ref="echartsRef" style="width: 500px;height: 400px;" v-scale=="handlerAdaptScale"></div> methods: { handlerAdaptScale(el, scale) { }, }
typescript注解：
type PX = (px: number, real: boolean) => string | number interface InstallOptions { rootValue: number } interface ScreenAdapter { rootFontSize: number init(): void destroy(): void getScale(): number addListener(callback: Function): void removeListener(callback: Function): void px: PX }
项目配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;" /> "devDependencies": { "postcss-plugin-px2rem": "^0.8.1", } module.exports = { plugins: { 'postcss-plugin-px2rem': { rootValue: 192, propList: ["*"], unitPrecision: 5, selectorBlackList: [/.norem-.*/], ignoreIdentifier: false, replace: true, mediaQuery: false, }, }, } export default defineConfig({ css: { postcss: { plugins: [ px2rem({ rootValue: 192, propList: ["*"], unitPrecision: 5, selectorBlackList: [/.norem-.*/], ignoreIdentifier: false, replace: true, mediaQuery: false, }), ] } }, }) import screenAdapter from 'screen-adapter' Vue.use(screenAdapter, {rootValue: 192}) window.screenAdapter this.screenAdapter this.px(_,?_) v-scale v-scale="handlerAdaptScale"
常见问题
放大缩小过程中，有个别元素变形？
写内联样式时，未使用px函数包裹，另外有些组件例如el-table-column的宽度只支持传入px单位的数值，不支持传入rem，可使用px函数px(12, true)，将第二个参数设置为true，此时会根据屏幕大小传入动态的px数值设置父元素line-height：0或者font-size:0内部无法转化为rem的组件，例如Echarts，可使用v-scale指令文字边缘模糊？
可以增加css text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always;或者font-weight: bold;但效果有限Echarts图表样式边缘模糊？
使用svg渲染器 echarts.init(this.$refs.chart, null, { renderer: "svg" })使用v-scale时会有留白或溢出？
v-scale根据视口的宽度缩放元素。如果父元素使用的vh、%这种视口单位，当视口的宽高比小于元素的宽高比，父级元素就会有留白；当父级元素大于元素的宽高比，元素就会有溢出。
这些情况可把v-scale提升到上面父级内部样式使用不会被转为rem的写法适配完让整个页面的底部留白或溢出产生滚动条，这是正常的。
如果确实不想存在留白或滚动，想要高度也自适应的页面，可以为元素绑定key值，视口变化时让其重新渲染：
<template> <div v-scale :key="scaleKey"></div> </template> import { debounce } from "lodash"; export default { data() { return { scaleKey: 1, } }, created() { this.screenAdapter.addListener(this.debounceRefreshHeightScale); }, beforeDestroy() { this.screenAdapter.removeListener(this.debounceRefreshHeightScale); }, methods: { debounceRefreshHeightScale: debounce(function () { this.scaleKey++; }, 500), } }
此方法比较耗费性能，请谨慎使用！
使用v-scale的元素宽高显示有问题？
如果使用v-scale的元素的宽高使用的百分比，图表就有可能在屏幕变化时因为渲染时机问题获得错误的宽高，此时可以使用真px值<Echarts width="400px" height="300px"/>让其固定宽高，或用v-if绑定接口的数据来源<Echarts v-if="data.length > 0"/>让其滞后渲染VScode强制将大写PX转为小写px
在VScode中使用Vue-official插件，并将其选为默认格式化配置，就不会格式化PX了为什么设计时不让元素随视口高度缩放？
现在所有视图设计的基本特点就是内容过多时产生垂直滚动条，并且用户天生有向下滚动的直觉，另外浏览器也并未提供可以一直准确有效的拿到视口高度的方法，如果想随视口高度适应，可自行使用vh、%或其他写法满足需要。
