解决vue2移动端引入px2rem插件导致muse、vux等等UI组件样式错乱，我们应该使用postcss-plugin-px2rem插件

最新推荐文章于 2024-02-29 13:31:18 发布
最新推荐文章于 2024-02-29 13:31:18 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： 项目 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xfmuchengxue/article/details/90379591
版权 
1、先npm 安装postcss-plugin-px2rem插件
npm i postcss-plugin-px2rem  --save -dev

2、找到与src同级目录下的.postcssrc.js

到此，就结束了，这样就不会导致ui组件里面的px转换成rem，样式也就不会错乱。

XingFang666
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 3、在 index.html 编辑
vue2使用vant组件库；使用rem后vant组件样式变小了。
i_am_a_div的博客
10-09 2149
vue2使用vant组件库；vue2使用vant组件库;使用rem后vant组件样式变小了。
px转为rem方法之插件postcss-plugin-px2rem的使用方法
最新发布
m0_67880202的博客
02-29 769
①安装webpack打包工具：npm install webpack -g②搭建vue脚手架：npm install -g vue-cli③创建vue项目：vue init webpack "项目名称"
vue项目使用px2remLoader插件将px转为rem之后加载瞬间尺寸由小变大，页面闪现错乱样式
mao871863224的博客
12-18 1854
vue项目使用px2remLoader插件，在index.html自定义设置font-size的大小，尤其是在首屏加载的时候，会出现页面各个元素尺寸由小变大的一个过程，很难看 刚开始一直在想是不是因为css文件过大，加载的时候先渲染了页面，然后css文件加载完之后样式才恢复正常，后来使用gzip压缩了打包的文件之后还是这样，（使用gzip打包可以减少打包文件体积，减少首屏渲染的时间，详见），还使用了v-cloak方法，并没有生效。转换思路，最后发现是px转rem的原因！ 在index.html文件中自定义了
使用flexible.js和第三方依赖包postcss-px2rem，解决pc端响应式和移动端自适应问题
在无知中学习，在学习中成长，在成长中学习
03-31 1808
使用flexible.js和第三方依赖包postcss-px2rem，解决pc端响应式和移动端自适应问题
Vue插件与ui组件样式冲突
m0_46872814的博客
07-27 1016
Vue插件与ui组件样式冲突 vuecli3.x搭建项目 安装了postcss-px2rem但是影响了ui组件的样式 1.因为postcss-px2rem不能忽略指定文件 需要安装postcss-px2rem-exclude （安装前需要先卸载postcss-px2rem，未安装postcss-px2rem直接安装postcss-px2rem-exclude ） （1）卸载 postcss-px2rem ：npm uninstall postcss-px2rem （2）安装postcss-px2r
vue-cli3 中postcss-px2rem影响ui组件样式的解决方案
weixin_39944458的博客
11-29 8649
问题：引入postcss-px2rem依赖后，vant组件库的样式变的很小 原因：依赖会把组件中px自动转换为rem，而实际组件自身已经做过适配，画蛇添足了 解决：把postcss-px2rem依赖卸掉，安装依赖postcss-px2rem-exclude，并修改配置文件package.json "postcss": { "plugins": { "au...
微信调整字体大小后，页面样式错乱解决方法
IT诗人
05-21 2106
IOS简单些： body{ -webkit-text-size-adjust: 100% ; } 安卓复杂些： (function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) {
通用方案px2rem 处理 内联样式、element-ui表头折行、label折行、表单项换行异常
qq_41220477的博客
06-14 2363
此时我们则需要在换行异常的表单项后添加下述代码，以上图为例，我们则需要在’生效日期’表单项后添加对应代码。
移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题
mm
02-04 645
rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小 问题的原因无非就是html一开始没有设置字体大小嘛，那我们就一开始按最常用的iPhone 6 尺寸，设置html的font-size: 50px;好了，设置html的font-size: 50px;就合理了吗？我的回答是，至少变化的范围非常小，以360px宽的设备为例，根字体大小应该是48px；以前相当于是从0px-48px，现在是50px-48px，不会造成很明显的闪烁问题。 至于为什么设置为50px；首先，设计稿是基于750px.
vue-cli3.0搭建移动端项目的适配问题以及解决第三方组件样式受影响的问题
weixin_44727080的博客
09-30 682
我们之前使用的解决移动端适配常用的方法是媒体查询+rem,em，这种适合小的项目，而且每次rem值计算也太麻烦了点，这里列出现在常用的另一种方法就是：lib-flexible和postcss-px2rem-exclude来完美的解决适配问题。
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
babel-plugin-styled-components-px2rem：Babel插件，用于将px转换为样式组件的rem单位
01-30
plugin-styled-components-px2rem的以下peerDependencies同时安装到您的项目中： { " peerDependencies " : { " @babel/core " : " ^7.0.0 " , " postcss " : " ^7.0.0 " }}用法看使用React和样式化组件。...
vue3.0中使用postcss-pxtorem的具体方法
10-15
主要介绍了vue3.0中使用postcss-pxtorem的具体方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
移动端vue调用照相机及相册
热门推荐
xfmuchengxue的博客
04-08 1万+
<template> <div class="me-detail"> <m-hbar title="个人笔记"/> <div class="detail-title"> 个人总结 </div> <p v-if="vpersonalNot...
element table 表格的行高以及表头样式修改，列的字段太多显示不下用...隐藏是show-overflow-tooltip
xfmuchengxue的博客
10-09 1万+
首先，表头样式的修改:header-cell-style 效果图 其次，表格行高的修改:row-style="rowClass" 最后，字多的解决办法show-overflow-tooltip
vue中 input框 清除按钮的显示与隐藏
xfmuchengxue的博客
04-19 1万+
<input v-model="name" class="input step2-cont-ipt" required placeholder="请输入姓名" > <a class="clear" @click="clear1();return false;"></a> methods: { clear1(){ if...
vue+element解决点击table列表的从详情或修改页面跳转路由到列表页总是跳转到第一页，而不能跳转到当前页的问题
xfmuchengxue的博客
12-14 9250
思路：将当前页的页码currentPage存入session，然后点击详情跳转到详情页面，然后，再次返回当前页的时候，在created生命周期里，获取到存储的currentPage，再进行加载 ...
记一次vue里面父组件给子组件style用props传值，以动态改变样式
xfmuchengxue的博客
06-14 8636
子组件nothing.vue 父组件list.vue
vue 使用 postcss-px2rem 报错node.getiterator is not a function
09-09
vue使用postcss-px2rem报错"node.getiterator is not a function"是因为postcss版本的问题。 postcss-px2rem是一个postcss插件，用于将px单位转换为rem单位。然而，早期版本的postcss的AST（抽象语法树）在解析时使用了方法"node.getiterator"，而新版的postcss已经将API进行了改变，没有"node.getiterator"这个方法。 要解决这个问题，可以尝试以下方法： 1. 升级postcss和postcss-px2rem插件。确保使用的版本兼容，并且postcss版本较高。 2. 检查package.json文件中的依赖项，查看是否有其他使用了postcss的插件，有时候不同版本的插件之间可能出现冲突。可以尝试将相关的插件版本进行调整或删除。 3. 查看webpack或者其他构建工具的配置文件，检查是否正确配置了postcss-loader和postcss-px2rem插件。可能需要调整或添加一些配置项来支持新版的postcss。 总之，以上是解决"node.getiterator is not a function"报错的一些方法，根据具体情况选择合适的解决方案。希望能够帮助到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值