当前位置：首页 > news >正文

v 3 + vite + ts 自适应布局(postcss-pxtorem)

news 2026/4/6 8:08:16

1、

当pc端、移动端H5等项目中，需要根据当前浏览器窗口或屏幕尺寸，来自适应的改变页面内元素尺寸时，就可以借助下述插件和相关配置来实现。

2、适用范围：vue3 + vite + ts

步骤一：相关依赖下载下载相关依赖

npm install postcss-pxtorem --save
npm install amfe-flexible --save

下载完之后：package.json

{"name": "baseh5","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite --host","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"amfe-flexible": "^2.2.1","less": "^4.2.0","postcss-pxtorem": "^6.1.0","vue": "^3.4.31"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.5","typescript": "^5.2.2","vite": "^5.3.4","vue-tsc": "^2.0.24"}
}

步骤二：在`main.ts`中进行引入

import { createApp } from 'vue'
import App from './App.vue'import 'amfe-flexible'  // 在`main.ts`中进行引入createApp(App).mount('#app')

步骤三：在`vite.config.ts`中进行配置

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 这里 - 引入pxtorem插件
import postCssPxToRem from 'postcss-pxtorem'export default defineConfig({plugins: [vue()],// 引入pxtorem插件 - ----------------------------------------------------css: {postcss: {plugins: [postCssPxToRem({/*配置在将px转化为rem时 1rem等于多少px，(因为我们搭配使用了amfe-flexible插件，此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)当UI设计稿的全屏基准宽度是1920px时 此处设置的值为192*/rootValue: 75,// propList - 配置方案1：所有px均转化为rempropList: ['*']/*propList - 配置方案2：若想设置部分样式不转化 可以在propList中配置，如：除border和font-size外，所有px均转化为rempropList: ["*", "!border","!font-size"],*/})]}},// 引入pxtorem插件 - ----------------------------------------------------resolve: {alias: {'@': fileURLToPath(new URL('./src/', import.meta.url))}}
})

3、验证效果

可以设置一个元素的宽度为我们UI设计稿的基准宽度，使其正好占满一行，
此时，可以看到，不论浏览器窗口如何放大缩小，该元素宽度都是正好占满一行。

4、注意点

1、
postcss-pxtorem插件，会将我们写在样式中的px根据我们在vite.config.ts中设置的rootValue值，按比例转化为rem。
但是，行内样式中的px，不会被转化为rem。

2、
amfe-flexible插件会根据当前可展示区域的实际宽度，动态设置的font-size为可展示区域宽度的十分之一，
这也就是，为什么我们在vite.config.ts中设置rootValue值时需要设置为UI设计稿的十分之一，
是为了，与此插件对font-size的设置相对应。

3、rem单位的特点是，1rem对应的px值等于<html>的font-size值，
也就是说，当<html>的font-size值变化时，1rem的值会跟随着动态变化，
比如：
有一个div，它的高度设置为1rem，
当页面内<html>的font-size为16px时，这个div的高度就是16px；
当页面内<html>的font-size为32px时，这个div的高度就是32px；

5、禁止缩放

用这种方案做 H5 的时候，在手机上打开，页面可以被缩放，就有些不专业了
可以用下面这种方法解决：
在 index.html的 head 标签中，添加以下代码，即可


<head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue + TS</title><!-- 禁止在手机端缩放 --><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><!--禁止在电脑浏览器滚轮缩放 --><script>document.addEventListener('mousewheel', function (e) {e = e || window.event;if ((e.wheelDelta && event.ctrlKey) || e.detail) {event.preventDefault();}}, {capture: false,passive: false})</script></head>