vue3(h5适配)做个记录，避免自己以后忘了哈哈

设置meate标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
1

自适应

1. 1.px是相对单位固定的，无法自适应，不会随着屏幕尺寸的改变而改变.

2. rem根据html的font-size进行缩放，可以自适应，缺点就是需要计算每个屏幕的font-size

3. vw，vh是相对viewport视口单位，配合meate可以直接使用无需计算

计算规则

• 1vw=1/100 视口宽度
• 1vh=1/100 视口高度
• 当前屏幕视口是375像素，1vw就是3.75像素

postCss

• postCss 提供了 把Css 转换AST，把px转化为vm

下面使用vite构建一个vue项目

npm init vue
1

新建一个文件
pxto-viewport.js

const defaultOptions = {
    viewPortWidth: 375,
    mediaQuery: false,
    unitToConvert: 'px'
}
export const pxToViewport = (options = defaultOptions) => {
    const opt = Object.assign({}, defaultOptions, options)
    return {
        postcssPlugin: 'postcss-px-to-viewport',
        //css节点都会经过这个钩子
        Declaration(node) {
            const value = node.value
            //匹配到px 转换成vw
            if (value.includes(opt.unitToConvert)) {
                //正则匹配到带有px的数值，然后转化后替换
                let regex = /\d+px/;
                const num = parseFloat(value) //转化成数值
                const transformValue = (num / opt.viewPortWidth) * 100  //转化
                let newStr = value.replace(regex, `${transformValue.toFixed(2)}vw`);  //替换
                node.value = newStr //赋值
            }
        },
    }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在vite.config中使用

import { fileURLToPath, URL } from 'node:url'
import { pxToViewport } from './src/plugins/pxto-viewport.js'
console.log("pxToViewport", pxToViewport)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //这块是css的处理
  css: {
    postcss: {
      plugins: [
        pxToViewport()
      ]
    },
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

这样就可以适配了··自己经过实验可是适配很多机型了，目前还没有发现bug。

原文出自：https://blog.csdn.net/qq1195566313/article/details/132526254。自己做了一个实现和调整，希望对大家有用。