vue3_移动端开发 postcss-px-to-viewport 插件

• 安装

npm install postcss-px-to-viewport -D

• vite.config.ts中配置 

import postcsspxtoviewport from "postcss-px-to-viewport"
export default defineConfig({
  plugins: [vue(), vueJsx()],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          landscape: false // 是否处理横屏情况
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

• 示例：

<!--
 * @since: 2023-05-31
 * index.vue
-->
<template>
  <div class="container">
    <header>
        <div class="left">Back</div>
        <div class="center">Port</div>
        <div class="right">Icon</div>
    </header>
    <main>
        <div v-for="item in 100">{{ item }}</div>
    </main>
    <footer>
        <div class="foot-items"  v-for="item in footer">
            <div >{{ item.icon }}</div>
            <div >{{ item.text }}</div>
        </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
type Footer<T> = {
  icon: T,
  text: T
}
 
const footer = reactive<Footer<string>[]>([
  {
    icon: "1",
    text: "首页"
  },
  {
    icon: "2",
    text: "商品"
  },
  {
    icon: "3",
    text: "信息"
  },
  {
    icon: "4",
    text: "我的"
  }
])
</script>

<style  lang="less">
body,html,#app{
    overflow: hidden;
    height: 100%;
    font-size: 14px;
}
.container{
    display: flex;
    flex-direction: column;
    height: inherit;
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        background-color: skyblue;
    }
    main{
        flex:1;
        overflow: auto;
        div{
            border:1px solid #ccc;
            background-color: pink;
            padding:5px;
            text-align: center;
        }
    }
    footer{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        border:1px solid #ccc;
        .foot-items{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            padding:5px;
            box-sizing: border-box
            ;
        }
    }
}
</style>