屏幕适配方案——详细完备版

实用框架：Vue2/Vue3
实用设备：pc端/移动端
适配计谋：动态rem+动态scale
方案效果：可让页面在不同屏幕下、放大缩小时保持页面不变形
  效果示例：
   当屏幕变化时：

    当放大缩小时：

  安装屏幕适配插件

1. 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，第二个参数为该元素被放大的倍数，其在视口变化时会自动执行
  
  1. // 使用方法一，例如echarts元素
  2. <div ref="echartsRef" style="width: 500px;height: 400px;" v-scale></div>
  4. // 使用方法二，传入监听函数
  5. <div ref="echartsRef" style="width: 500px;height: 400px;" v-scale=="handlerAdaptScale"></div>
  7. methods: {
  8.   handlerAdaptScale(el, scale) {
  9.     // do sth...
  10.   },
  11. }

  复制代码

typescript注解：

1. // px函数注解，可转换为rem，或在第二个入参传入true，获得动态number类型的px
2. type PX = (px: number, real: boolean) => string | number
4. // Vue.use时传入的options
5. interface InstallOptions {
6.         rootValue: number
7. }
9. // 插件提供的方法
10. interface ScreenAdapter {
11.         rootFontSize: number // 根元素上动态的font-size
13.         init(): void         // Vue.use时会自动调用，初始化适配策略
15.         destroy(): void      // 销毁适配策略
17.         getScale(): number      // 获得v-scale被放大缩小的倍数
19.         addListener(callback: Function): void    // 添加屏幕变化时的监听函数
21.         removeListener(callback: Function): void // 移除屏幕变化时的监听函数
23.         px: PX
24. }

复制代码

项目设置

1. // index.html (防止h5端用户手动放大缩小)
2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;" />
5. // package.json 安装postcss-plugin-px2rem
6. "devDependencies": {
7.   "postcss-plugin-px2rem": "^0.8.1",   
8. }
10. // 配置px2rem
11. // postcss.config.js 写法
12. module.exports = {
13.     plugins: {
14.     'postcss-plugin-px2rem': {
15.       rootValue: 192, // 设计稿宽度 / 10
16.       propList: ["*"],
17.       unitPrecision: 5,
18.       selectorBlackList: [/.norem-.*/], // 开头为.norem-的class的大括号范围内所有样式不会被转为rem
19.       ignoreIdentifier: false,
20.       replace: true,
21.       mediaQuery: false,
22.     },
23.   },
24. }
25. // 或者vite.config.js 写法
26. export default defineConfig({
27.     css: {
28.       postcss: {
29.        plugins: [
30.         px2rem({
31.           rootValue: 192, // 设计稿宽度 / 10
32.           propList: ["*"],
33.           unitPrecision: 5,
34.           selectorBlackList: [/.norem-.*/], // 开头为.norem-的class的大括号范围内所有样式不会被转为rem
35.           ignoreIdentifier: false,
36.           replace: true,
37.           mediaQuery: false,
38.         }),
39.       ]
40.     }
41.   },
42. })
43.   
44.   
45. // main.js
46. import screenAdapter from 'screen-adapter-plugin'
48. Vue.use(screenAdapter, {rootValue: 192}) // 挂载screenAdapter类,传入跟px2rem插件一致的rootValue
51. // 调用方式
52. window.screenAdapter
53. this.screenAdapter
54. this.px(_,?_)
56. // 自定义指令使用方式
57. v-scale
58. 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值，视口变化时让其重新渲染：
    
    1. <template>
    2.     <div v-scale :key="scaleKey"></div>
    3. </template>
    5. import { debounce } from "lodash";
    6. export default {
    7.     data() {
    8.       return {
    9.          scaleKey: 1,
    10.       }
    11.     },
    12.     created() {
    13.       // 视口变化时让元素重新绑定v-scale
    14.       this.screenAdapter.addListener(this.debounceRefreshHeightScale);
    15.     },
    16.     beforeDestroy() {
    17.       this.screenAdapter.removeListener(this.debounceRefreshHeightScale);
    18.     },
    19.     methods: {
    20.       debounceRefreshHeightScale: debounce(function () {
    21.         this.scaleKey++;
    22.       }, 500),
    23.     }
    24. }

    复制代码
    此方法比力泯灭性能，请审慎使用！
    
    
  
  
• 使用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、%或其他写法满足需要。
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。