这段时间在做一移动端的项目的开发，由于我们不需要适配PC端和移动端的转换，所以我们采用的是px转viewport的方式来实现移动端的开发。但是在我们真正使用的过程中，我们发现了一个问题，就是对于行内的样式和动态计算出来的px的样式没有办法处理，所以我们开始着手去解决这个问题。
现成的插件
由于我们的框架使用的是vite进行开发的，所以我们找了一些关于vite相关的插件，但是这些插件仅仅只是处理了静态的行内样式，对于动态的行内样式就没办法进行处理如下：
可以处理静态行内样式
<template>
<div style="width: 100px;height:100px">
</div>
</template>
无法处理动态行内样式
<script lang="ts" setup>
const styles = computed(()=>{
return {
width: "100px",
height: "100px"
}
})
</script>
<template>
<div :style="styles">
</div>
以上的这种情况，我们找到的所有的插件里面，都没有办法实现。
所以我们选择了自己开发一个插件来实现这个功能。
vite-plugin-px2viewport
通过这个插件，你可以实现行内的基础样式的转换和动态样式的转换，内部默认页集成了postcss-px-to-viewport-8-plugin这个插件来实现css文件的px转vw的处理，下面简单介绍一下我们插件的使用方式
安装
pnpm add @mistjs/vite-plugin-px2viewport
使用
在 vite.config.ts:
import { defineConfig } from 'vite'
import {px2viewport} from '@mistjs/vite-plugin-px2viewport'
export default defineConfig({
plugins: [
px2viewport({
viewportWidth: 750
})
],
})
属性
viewportWidth 你可以通过这个属性来控制画布的大小，当然了这个函数同样支持函数调用，会返回一个文件名，最后需要返回一个画布的转换比例即可(file)=>number。
例子
行内样式处理
你可以通过我们的插件实现基础静态行内样式的处理： 输入
<template>
<div style="width: 100px;height: 100px;"></div>
</template>
输出
<template>
<div style="width: 13.33334vw;height: 13.33334vw;"></div>
</template>
动态样处理
输入
<template>
<div :style="{width: '100px', height: '100px'}"></div>
</template>
输出
<template>
<div :style="{width: '13.33334vw', height: '13.33334vw'}"></div>
</template>
动态自定义处理
输入
<script lang="ts" setup>
import { computed } from "vue"
const styles = computed(()=>{
return {
width: '100px',
height: '100px'
}
})
</script>
<template>
<div style="font-size: 18px" :style="styles"></div>
</template>
在运行时会自动处理px到vw的转换。
开源地址
我们的项目是开源的，如果依旧满足不了大家的需求，欢迎给我们的项目提交issue或者pr。
如果我们的项目给你带来帮助，可以给我们的项目点一个免费的⭐️，谢谢~
项目地址：px2viewport
