Vite-Vue3-TypeScript：009-屏幕适配

屏幕适配是前端开发中一个常见的问题。在Vue3项目中，可以使用一些CSS工具和库来帮助我们更好地进行屏幕适配。以下是一个简单的例子，展示如何使用CSS的媒体查询来进行基本的屏幕适配。

1. 首先，在项目中安装并设置postcss-pxtorem库，这是一个可以将CSS中的px单位转换为rem单位的工具，有利于实现响应式布局。

npm install postcss-pxtorem --save-dev

2. 在vite.config.ts中配置postcss-pxtorem:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入postcss-pxtorem
import pxtorem from 'postcss-pxtorem'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 37.5, // 设计稿宽度/10，通常设置为37.5（对应100px设计稿）
          propList: ['*'], // 需要转换的属性，这里选择转换所有属性
        }),
      ],
    },
  },
})

3. 在main.ts中引入Element Plus和Normalize.css:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'normalize.css/normalize.css' // 用于清除默认样式
 
const app = createApp(App)
 
app.use(ElementPlus)
 
app.mount('#app')

4. 在组件中使用样式，例如：

<template>
  <div class="container">
    <el-button type="primary">按钮</el-button>
  </div>
</template>
 
<script setup lang="ts">
// 这里是组件的逻辑
</script>
 
<style scoped>
.container {
  width: 6.4rem; /* 相当于250px */
  margin: 0 auto;
}
</style>

以上代码展示了如何在Vite + Vue3 + TypeScript项目中使用postcss-pxtorem进行屏幕适配。通过设置rootValue为设计稿宽度的1/10，我们可以很方便地将CSS单位转换为rem，实现响应式布局。