vue3 vite使用postcss-px-to-viewport 实现页面自适应

一、什么是 postcss-px-to-viewport?

postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 px 单位转换为视口单位(vw、vh 或 vmin)。

视口单位是相对于视口尺寸来计算的长度单位,而不是相对于父元素或根元素。这意味着使用视口单位进行布局和样式设置时,元素会随着屏幕尺寸的变化而自适应。

二、为什么要使用 postcss-px-to-viewport?

在移动端开发中,我们通常使用 viewport 来适配不同的屏幕尺寸。但是,在实际开发中,我们经常遇到以下问题:
  • 在不同屏幕尺寸下显示效果不一致。
  • 在高分辨率屏幕上,元素过小或过大。
  • 使用 rem 单位存在兼容性问题。
  • 因此,我们需要一种更加智能、灵活的单位来解决这些问题。而 postcss-px-to-viewport 就是解决这个问题的好方案。

三、如何在 Vue3 中使用 postcss-px-to-viewport?

首先,我们需要安装相关的插件:
javascript 复制代码
npm install postcss-px-to-viewport -D
在vite.config.js文件中进行配置
javascript 复制代码
import vue from '@vitejs/plugin-vue'
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import postcsspxtoviewport from 'postcss-px-to-viewport'
export default defineConfig({
  // ...
  plugins: [
    vue(),
  ],
    //在这配置插件内容
   css: {
      postcss: {
        plugins: [
          postcsspxtoviewport({
            // 要转化的单位
            unitToConvert: 'px',
            // UI设计稿的大小
            viewportWidth: 1920,
            // 转换后的精度
            unitPrecision: 6,
            // 转换后的单位
            viewportUnit: 'vw',
            // 字体转换后的单位
            fontViewportUnit: 'vw',
            // 能转换的属性,*表示所有属性,!border表示border不转
            propList: ['*'],
            // 指定不转换为视窗单位的类名,
            selectorBlackList: ['ignore-'],
            // 最小转换的值,小于等于1不转
            minPixelValue: 1,
            // 是否在媒体查询的css代码中也进行转换,默认false
            mediaQuery: false,
            // 是否转换后直接更换属性值
            replace: true,
            // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
            exclude: [],
            // 包含那些文件或者特定文件
            include: [],
            // 是否处理横屏情况
            landscape: false
          }),
        ]
      }
    }
})
重启项目即可实现px转vw
相关推荐
daols885 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴8 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust9 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放9 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝10 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele10 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试