Vue3+Vite3+Ts4配置移动端适配
warning:
这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。
在Vue3+Vite3+TypeScript项目中配置移动端适配，可以通过以下步骤进行：
- 安装
lib-flexible和postcss-px2rem：
npm install lib-flexible --save
npm install postcss-px2rem --save-dev- 在项目入口文件
main.ts或main.js中引入lib-flexible：
import 'lib-flexible/flexible'- 在
vite.config.ts中配置postcss-px2rem：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入postcss-px2rem
import px2rem from 'postcss-px2rem'
// 配置rem转换
const postcss = px2rem({
remUnit: 37.5 // 设计稿宽度/10，通常设置为750/10=75
})
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [postcss]
}
}
})- 在
index.html中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">以及lib-flexible的<script>标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your App</title>
</head>
<body>
<div id="app"></div>
<!-- 引入lib-flexible -->
<script src="//g.alicdn.com/fdilab/lib-flexible/0.3.21/lib-flexible.js"></script>
</body>
</html>- 配置完成后，重新运行项目，你的Vue3+Vite3+TypeScript项目将支持移动端适配。
注意：确保在项目中使用的所有CSS单位，除了px，都使用rem单位来保证一致性。同时，可以利用CSS Media Queries来进行不同屏幕尺寸的适配。
评论已关闭