本博客将介绍如何使用Vue3、Vite、PostCSS和Viewport Units（VM）来实现屏幕自适应。屏幕自适应是在不同设备上使网页自动适应屏幕大小的技术，使用户在任何设备上都能获得良好的浏览体验。

Vue3

Vue3是一种用于构建用户界面的渐进式JavaScript框架。它是Vue.js的最新版本，带来了许多新的功能和改进。

Vite

Vite是一个新型的前端构建工具，它针对现代浏览器的原生ECMAScript模块系统进行了优化。Vite在开发环境下具有超快的冷启动，可以实现零配置。

PostCSS

PostCSS是一种用JavaScript编写的工具，可以转换CSS代码以增加浏览器的兼容性。它可以将未来的CSS语法转换为当前浏览器支持的语法。

Viewport Units（VM）

Viewport Units是一种用于设置CSS属性的单位，这些属性将相对于浏览器视口的大小进行计算。它可以帮助我们轻松实现屏幕自适应效果。

实现屏幕自适应

步骤1：创建Vue3项目

首先，我们需要在本地环境中安装Vue3，并创建一个新的Vue项目。可以使用Vue CLI或者Vite来完成这个步骤。

# 使用Vue CLI创建项目
vue create my-vue-app

# 使用Vite创建项目
npm init vite@latest my-vite-app

步骤2：引入PostCSS

接下来，我们需要在项目中引入PostCSS，并配置一些插件来处理CSS文件。

在Vue CLI中，我们可以在vue.config.js文件中进行配置，添加如下内容：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 1920,  // 设计稿宽度
            viewportHeight: 1080,  // 设计稿高度
            unitPrecision: 3,  // 生成的视口单位值的小数位数
            viewportUnit: 'vm', // 希望使用的视口单位
            selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器
            minPixelValue: 1, // 小于或等于1px不转换为视口单位
            mediaQuery: false // 允许在媒体查询中转换px
          }),
        ],
      },
    },
  },
};

在Vite中，我们可以在vite.config.js文件中进行配置，添加如下内容：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import pxToViewport from 'postcss-px-to-viewport'

// .postcssrc.js 或 js 的配置，以下只要需要的可以自行配置
const postcssConfig = {
  plugins: [
    pxToViewport({
      viewportWidth: 1920,  // 设计稿宽度
      viewportHeight: 1080,  // 设计稿高度
      unitPrecision: 3,  // 生成的视口单位值的小数位数
      viewportUnit: 'vm', // 希望使用的视口单位
      selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器
      minPixelValue: 1, // 小于或等于1px不转换为视口单位
      mediaQuery: false // 允许在媒体查询中转换px
    }),
  ],
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: postcssConfig
  }
})

步骤3：使用Viewport Units（VM）

现在，我们可以在Vue组件的样式中使用Viewport Units来实现屏幕自适应。

<template>
  <div class="container">
    <div class="box"></div>
  </div>
</template>

<style>
.container {
  width: 100%;  // 使用VM单位设置宽度
  height: 100%;  // 使用VM单位设置高度
}

.box {
  width: 50vm;  // 屏幕宽度的50%
  height: 30vm;  // 屏幕高度的30%
  font-size: 2vm;  // 屏幕高度的2%
}
</style>

步骤4：预览效果

最后，我们可以在开发环境中预览自适应效果。可以运行npm run serve命令以预览Vue CLI项目，或者运行npm run dev命令以预览Vite项目。

结语

通过使用Vue3、Vite、PostCSS和Viewport Units，我们可以轻松实现屏幕自适应的网页。这将帮助我们在不同的设备上提供一致的用户体验。

希望本博客能够对你有所帮助，感谢阅读！

本文来自极简博客，作者：心灵之旅，转载请注明原文链接：Vue3 vite postcss vm实现屏幕自适应