关于postcss-pxrem和vant - ui组件库冲突页面变小的问题

最新推荐文章于 2025-03-04 18:57:12 发布

self_challenge

最新推荐文章于 2025-03-04 18:57:12 发布

阅读量3k

点赞数 2

文章标签： vue

本文链接：https://blog.youkuaiyun.com/self_challenge/article/details/106268408

版权

在Vue移动端项目中，使用postcss-px2vw进行px转rem自动化处理带来便利，但也导致引入的UI组件库样式受到影响。本文介绍了这一问题及其解决方法，通过配置postcss.config.js文件，实现组件库与postcss并行工作，避免样式冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue移动开发中，使用postcss-px2vw插件它会自动将px单位换算成rem，这样不用计算很方便，但同时也存在一些问题，如果我们需要使用ui组件库内容，它会将被引入组件的px转换为rem，最后影响样式。这个问题浪费了很长时间，在这总结一下以免忘了。。。

安装

npm install postcss-pxtorem --save

在postcss.config.js中写入：

const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')

m

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

self_challenge

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue2之移动端布局之postcss-px-to-viewport（兼容vant-ui）

https://shixuebin.gitee.io/hexo-blog/

06-23

2891

安装 npm i postcss-px-to-viewport -D 并在项目根目录下添加.postcssrc.js文件添加如下配置： module.exports = { plugins: { "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 6,

Vant UI 组件库解析

最新发布

T_iAn_T的博客

04-02

1084

Vant UI 组件库解析

2 条评论您还未登录，请先登录后发表或查看评论

postcss-pxrem和vant - ui组件库冲突页面变小

YangWenYu_lala的博客

03-01

882

vue移动开发中，使用postcss-px2vw插件它会自动将px单位换算成rem，这样不用计算很方便，但同时也存在一些问题，如果我们需要使用ui组件库内容，它会将被引入组件的px转换为rem 面向百度编程果然没错 const pxtorem = require('postcss-pxtorem') const autoprefixer = require('autoprefixer') module.exports = ({ file }) => { let rootValue

postcss.config.js配置解决vant在移动端上会变小的问题

liaoxianhua888的博客

06-22

1111

postcss.config.js配置解决vant在移动端上会变小的问题

CSS—px与rem：3分钟掌握rem适配原理

海晨忆的博客

03-04

1203

rem是相对于根元素（即元素）的字体大小而言的相对长度单位。它不受元素字体大小和父元素字体大小的影响，只受根元素字体大小的影响。

postcss-px2rem vantjs 样式大小显示问题

Young_Gao的博客

06-25

6823

当postcss-px2rem 的 rootValue 设置为 75 或者 37.5 的时候，会发现整个都显得特别小解决办法，postcss.config.js 中如下配置 const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-pxtorem"); module.exports =...

解决vant-ui变小的问题

iphonepl的博客

06-18

3008

vue使用rem布局时 vant插件字体变小欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如

关于“postcss-pxtorem”插件不能把移动端vant中的icon组件自动转换成rem的问题

qq_71247851的博客

09-23

1588

vant中icon图标尺寸不能适配问题

vue-cli3 + vant + postcss-px2rem实现移动端页面.docx

09-06

vue-cli3 + vant + postcss-px2rem实现移动端页面

参照Vant-Weapp开发的抖音原生小程序UI组件库.zip

02-25

【标题】"参照Vant-Weapp开发的抖音原生小程序UI组件库"指的是一个基于Vant-Weapp设计思路创建的，专为抖音小程序设计的原生UI组件集合。Vant-Weapp是一个轻量级的小程序组件库，它在微信小程序中广泛使用，以其简洁...

vue-cli3.0 结合postcss-pxtorem和lib-flexible实现移动端适配

笔记库

03-23

989

基于vue做了一个移动端的项目，同时引入的了第三方组件库（有赞vant）。当时选择用rem件来做适配。其他内容可以正常显示，但是引起了第三方插件内容变小的问题。现将解决方法整理出来。原因第三方组件库变小的原因主要是因为第三方组件库已经做了适配，依据的data-dpr="1"时写的。而引入插件进行rem适配时，data-dpr不是一个写死的，而是一个动态的了。走过的弯路当时试过px2re...

postcss vant组件库 冲突问题

sam的博客

03-14

1117

https://www.cnblogs.com/zhangnan35/p/12682925.html

750页面css写法,解决vant 在750设计稿中，样式小的问题

weixin_32989877的博客

08-03

1454

问题描述：问题描述，vant使用的px为单位，为1x图(375)，而目前常规设计稿使用2x图(750)，在使用postcss-pxtorem插件转换rem时，导致vant 组件样式过小postcss-pxtorem中处理：postcss.config.js文件配置module.exports = ({ file }) => {let isVant = file && fil...

vue全局自适应大小: postcss-pxtorem,vue2vue3通用适配

热门推荐

全栈羊的搬砖日常

12-11

1万+

/ 配置基本大小// 设置 rem 函数//当前页面宽度相对于1920px屏幕宽的缩放比例，可根据自己需要修改。//设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）setRem();//初始化// 适配 - 重置函数setRem();// 全局可调用(其他方式也可)// 改变窗口大小时重置 remsetRem()适配的方法总体分为两步:px转换成remrem根据屏幕大小重置基数改变大小。

postcss-pxtorem设置不转换UI框架的CSS单位

一捆铁树枝的博客

12-14

4356

在移动端项目中使用postcss-pxtorem做适配，同时也使用到了第三方UI库（vant）。这时就出现了一个问题。第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem.导致样式缩小。查询postcss配置文档后发现其提供了selectorBlackList 属性来忽略掉某些选择器，vant-UI组件库的CSS都是以.van开头的因此我只需要将 .van 忽略掉就好，具体配置如下： module.exports = { plugins: { // 这个工具可.

创建移动端项目，引入vant及遇到的问题总结

欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈

01-19

3078

使用vant创建移动端项目

vue2使用vant组件库；使用rem后vant组件样式变小了。

i_am_a_div的博客

10-09

3201

vue2使用vant组件库；vue2使用vant组件库;使用rem后vant组件样式变小了。

解决使用rem布局，vant组件样式变小的问题

tian6632的博客

06-28

3193

解决使用rem布局，vant等移动端组件会出现样式变小的问题，原因如下：（1）通常使用flexible.js（淘宝团队的移动端布局处理方式）就可以，当然使用其他的也是一样的。（1）因为两者使用的单位不一样，vant等使用的是单位，我们项目中使用的是解决使用rem布局，vant等移动端组件会出现样式变小的问题，解决方案如下：添加以下代码即：标签，是：里面的内容结果如图：...

使用PostCSS做网页适配时，设计稿于vant组件默认px宽度不一致解决方法

BiuBiu_Ka

07-09

1142

/** * PostCSS 配置文件 */ module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 autoprefixer 插件 // 作用：生成浏览器 CSS 样式规则前缀 // VueCLI 内部已经配置了 autoprefixer 插件 // 所以又配置了一次，所以产生冲突了 // 'autoprefixer': { // autoprefixer 插件的配置 // //

使用postcss-px-to-viewport 插件vant组件变小

03-04

### 解决 Vant 组件在使用 `postcss-px-to-viewport` 后显示变小的问题 #### 了解原因 Vant 组件库默认采用的是基于 rem 的尺寸单位，而 `postcss-px-to-viewport` 将所有的 px 转换为了 vw 单位。这种转换可能导致原本按照固定比例计算的组件大小发生改变，特别是对于那些依赖于 html 字体大小（即 root font size）进行缩放的设计[^1]。 #### 配置调整建议为了避免上述情况的发生，在项目中的 postcss.config.js 文件内针对 Vant 库做特殊处理是非常必要的： ```javascript module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 750, exclude: /node_modules|vant/, // 排除 node_modules 和 vant 中的文件不参与转换 selectorBlackList: ['.ignore', '.hairline'], // 黑名单选择器不会被转换 minPixelValue: 1 } } }; ``` 通过这种方式可以确保来自 Vant 的样式不受此插件的影响，从而保持原有的视觉效果不变。另外一种方法是在引入 Vant 样式之前重写其基础变量，使得即使经过了 px 到 vw 的转换也能维持正确的展示尺度。这通常涉及到修改主题配置或是覆盖某些全局 CSS 变量[^4]。 #### 使用代码片段验证解决方案的有效性下面是一个简单的例子用于测试修正后的表现是否正常： ```html <template> <van-button type="primary">按钮</van-button> </template> <script setup lang="ts"> import { Button as VanButton } from 'vant'; </script> <style scoped> /* 如果需要进一步微调 */ .van-button--normal { padding-left: 20px; padding-right: 20px; } </style> ``` 如果一切设置无误，则页面上的 Vant 按钮应当能够以预期的方式呈现出来，既不会显得过大也不会过小。