移动端自适应方案有很多，这里我们团队使用的是px转vw的方案，使用的是postcss-mobile-forever插件，但是有一个比较难受的问题就是这个插件不支持行内样式的转换，但我们难免有时候会写一些简单的行内样式，所以这里偶尔看到了一个插件@mistjs/vite-plugin-px2viewport还是蛮nice的哈哈哈，他可以帮助你在行内样式的px单位转vw单位，比较牛的一点的是他还支持动态转换，也就是说当你用变量进行绑定的时候，动态去更改这个变量他也是能够自动转换vw的，这里帮忙推广一下希望能够给大家带来帮助！
请看实战效果：
源代码如下：
<script setup lang="ts">
import { ref } from "vue"
const width = ref("100px")
const height = ref("100px")
const onClickBox = () => {
width.value = parseInt(width.value) + 10 + "px"
}
</script>
<template>
<div :style="{ width: width, height: height, background: 'red' }" @click="onClickBox"></div>
</template>
希望能够帮助到大家！
