Vite + vue3 项目使用 amfe-flexible 和 postcss-pxtorem 实现不同屏幕自适应

amfe-flexible 和 postcss-pxtorem 可以一起使用来实现移动端的适配效果。

amfe-flexible 主要用于动态设置根元素字体大小(rem),以根据屏幕尺寸进行自适应布局。它会根据设备的屏幕宽度计算出根元素字体大小,并将其设置为页面的根元素的字体大小。然后,开发者可以在 CSS 样式中使用 rem 单位来设置元素的尺寸和间距,从而实现自适应布局。

postcss-pxtorem 是一个 PostCSS 插件,用于将 CSS 中的像素单位(px)转换为 rem 单位。它会在构建过程中自动分析 CSS 文件,将指定的像素值转换为相应的 rem 值,以适应动态设置的根元素字体大小。

配置 amfe-flexible

配置 amfe-flexible 非常简单,只需要安装引入一下即可

安装 amfe-flexible

npm install amfe-flexible --save

###在 main.js 引入

import 'amfe-flexible'

配置 postcss-pxtorem

配置 postcss-pxtorem 也不难,只需要安装在 vite.config.js 配置一下就行

安装

npm install postcss postcss-pxtorem --save-dev

vite.config.js 配置

import pxtorem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 75, // 这里写设计稿的宽度/10即可,例如设计稿宽度是750px就写75
          // vant默认是37.5,如果是使用了vant的话可以像下面这样写
          // rootValue(res) {
          //   return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
          // },
          propList: ['*'], // 需要转换的属性,默认转换所有属性
          selectorBlackList: [] // CSS选择器黑名单,防止部分选择器被转换
          exclude: /\/node_modules\//i, // 忽略包文件转换rem
        })
      ]
    }
  }
});

出现的问题

一、打包后 postcss-pxtorem 失效

第一次打包没问题,后面再打包 postcss-pxtorem 就失效,不会转变 px 为 rem 了
按下面步骤解决(一次性),没比较好的解决办法,有大佬知道可以说下

  1. 清理缓存
npm cache clean --force
  1. 删除依赖

    删除 dist 打包文件夹和 node_modules 依赖文件夹

  2. 安装依赖

npm install
  1. 重新打包

不同尺寸效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

参考

vite + vue3 使用 postcss-pxtorem 适配移动端
移动端—在 vant 中使用 postcss-pxtorem 和 lib-flexible 实现 rem 布局适配

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在vite.config.ts中适配postcss-pxtoremamfe-flexible,需要进行如下配置: 1. 安装依赖 首先,需要安装postcss-pxtoremamfe-flexible这两个库,可以使用npm或yarn进行安装: ``` npm install postcss-pxtorem amfe-flexible --save-dev ``` ``` yarn add postcss-pxtorem amfe-flexible --dev ``` 2. 配置vite.config.ts 在vite.config.ts中,需要添加一个postcss插件,并将amfe-flexible作为其参数传入,同时也需要配置postcss-pxtorem插件,代码如下: ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import postcssPxToRem from 'postcss-pxtorem'; export default defineConfig({ plugins: [ vue(), { name: 'postcss', async transform(css, id) { if (id.endsWith('.vue') || id.endsWith('.css')) { const { default: postcss } = await import('postcss'); const { default: flexible } = await import('amfe-flexible'); const processor = postcss([postcssPxToRem({ rootValue: 37.5, propList: ['*'], })]); const result = await processor.process(css, { from: id }); return { code: result.css, map: result.map, }; } }, enforce: 'post', }, ], }); ``` 这里使用vitepostcss插件,该插件可以通过调用postcss的API来处理CSS文件。在transform函数中,首先判断当前文件的类型是否为.vue或.css,然后使用postcss-pxtorempx转换成rem,其中rootValue为根元素的字体大小,propList为要转换的属性列表,这里设置为所有属性都转换。 同时,将amfe-flexible作为postcss插件的参数传入,这样就可以自适应不同屏幕尺寸。 需要注意的是,由于postcss插件是异步执行的,因此需要使用async/await来等待插件执行完成后再返回结果。 以上就是在vite.config.ts中适配postcss-pxtoremamfe-flexible的方法。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值