vue webApp使用lib-flexible和px2rem引用第三方ui库后，样式错乱问题

最新推荐文章于 2024-05-11 00:29:07 发布
最新推荐文章于 2024-05-11 00:29:07 发布
阅读量674 收藏 1
点赞数
分类专栏： IT民工 前端 web 文章标签： 第三方UI库样式 UI库 css px2rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qxfjyk/article/details/102476368
版权
IT民工 同时被 3 个专栏收录
39 篇文章 0 订阅
订阅专栏
前端
39 篇文章 0 订阅
订阅专栏
web
35 篇文章 0 订阅
订阅专栏

首先，需要卸载项目中的postcss-px2rem。

npm uninstall postcss-px2rem --save-dev

其次，安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

然后在postcss.js下配置

“postcss-px2rem-exclude”: {
remUnit: 75,
exclude: /node_modules/
}

最后记得把utils.js下的postcss-px2rem配置注释就ok了

终极前端开发协会
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue项目中使用lib-flexible解决移动端适配的问题
一个来自外太空的游客
10-10 827
第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible $ npm install lib-flexible --save 二、在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。 lib-flexible会自动在html的head中添...
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
在编写CSS样式时，可以直接使用px单位，px2rem-loader将其自动转换为rem单位。 例如： ```css .selector { width: 150px; height: 64px; font-size: 28px; border: 1px solid #ddd; } ``` 编译后将被转换为：...
移动端使用lib-flexible与px2rem-loader导致第三方UI库样式崩坏
weixin_33858336的博客
04-25 1611
处理方案 卸载px2rem-loader npm uninstall px2rem-loader --save-dev 复制代码删除build/utils.js文件以下代码 安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save-dev 复制代码打开项目根目录下.postcssrc.js文件，添加以下代码 ...
2024年Vue移动端用淘宝弹性布局lib-flexible插件做适配(1)，2024年最新普通二本的辛酸Web前端面试之路
最新发布
2401_84123150的博客
05-11 1169
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
vue-cli3.0结合lib-flexible、px2rem实现pc端大屏适配，完美解决第三方ui库样式变小问题
zyx的博客
06-04 2466
一、项目中安装lib-flexible npm install lib-flexible --save 二、在项目的入口main.js文件中引入lib-flexible import 'lib-flexible' 第二部分：使用postcss-px2rem-exclude自动将css中的px转换成rem 安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save 配置exclude选项 配置位置是项..
解决vue加cordova项目使用lib-flexible插件，到系统中设置字体放大的效果，应用布局混乱的问题...
weixin_30555515的博客
05-23 314
移动端项目，使用lib-flexible插件做适配，在android端，设置了系统的字体文件大小后，原先左右排列的元素，被挤成了两排。最直接的解决方法就是禁用系统的文字放大效果 首先安装插件 cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git 在项目中添加如下代码 插件地...
解决vue2移动端引入px2rem插件导致muse、vux等等UI组件样式错乱，我们应该使用postcss-plugin-px2rem插件
xfmuchengxue的博客
05-20 2288
1、先npm 安装postcss-plugin-px2rem插件 npm i postcss-plugin-px2rem --save -dev 2、找到与src同级目录下的.postcssrc.js 到此，就结束了，这样就不会导致ui组件里面的px转换成rem，样式也就不会错乱。 ...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
lib-flexible 结合 WKWebView 的样式错乱解决方法
weixin_30896763的博客
05-17 255
技术栈 lib-flexible 是淘宝的可伸缩方案 WKWebView 是ios8以上支持的网页控件 问题场景 最新公司一个项目使用 lib-flexible 来做移动端的伸缩解决方案，页面在safari上都是正常的， 在使用了 WKWebView 的客户端里却是错乱的 经过尝试，解决方法如下： <meta content="maximum-dpr=2" name="flexible" /...
vue-cli3.0搭建移动端项目的适配问题以及解决第三方组件样式受影响的问题
weixin_44727080的博客
09-30 773
我们之前使用的解决移动端适配常用的方法是媒体查询+rem,em，这种适合小的项目，而且每次rem值计算也太麻烦了点，这里列出现在常用的另一种方法就是：lib-flexible和postcss-px2rem-exclude来完美的解决适配问题。
vue项目中使用element-ui，页面变形问题
m0_60622481的博客
06-30 732
vue项目中使用element-ui，页面变形问题
vue中的适配问题 lib-flexible
qq_46160082的博客
03-17 1576
1.安装lib-flexible yarn add lib-flexible 2.在main.js中导入 import "lib-flexible/flexible.js"; 原本个文件是用来适配移动端的，所以这里需要修改一下源码 function refreshRem() { var width = docEl.getBoundingClientRect().width; // if (width / dpr > 540) {
react antd-mobile lib-flexible自适应（px2rem无效的解决方法）
yuanqi3131的博客
08-25 3148
一、前言 适应时代，接触了点typescript，正好公司做了个移动端项目，不过我用的是vue，利用一些时间，用react+typescript来重新写一个，正好样式有了，省了一部分时间，但是typescript还是有诸多限制，其中波折，难以言述，闲话少述，本项目采用react+typescript+aixos+antd-mobile+scss搭建而成，因为是移动端，所有肯定要考虑自适应问题，但是出现了问题，很心累。 二、自适应 选取淘宝自适应方案lib-flexible,加px2rem，px自动转换rem
H5适配手机端的依赖postcss-px2rem-exclude，可解决导致第三方组件样式变小的问题
HelloWorldLJY的博客
06-17 1754
问题：引入postcss-px2rem依赖后，第三方组件库的样式变的很小 原因：依赖会把组件中px自动转换为rem，而实际组件自身已经做过适配，画蛇添足了 解决：把postcss-px2rem依赖卸掉，安装依赖postcss-px2rem-exclude，根目录下创建postcss.config.js module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { remUnit: 1,/
vue中移动端使用postcss-px2rem与ui组件冲突问题
Kerwin_yue的博客
03-14 5927
在vue移动开发中，使用px2rem-loader，会自动将px单位换算成rem，但是存在一个问题，会将第三方UI库的px单位转为rem。
CSS day12 移动端布局练习
qq_34620296的博客
09-13 726
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
vue移动端rem适配--附带引入第三方库解决方案
qiuzhf
02-25 3093
一、先上解决方案： 移动端适配我采用淘宝的一套rem解决方案 源码： https://github.com/amfe/lib-flexible 1、安装 npm i -S amfe-flexible 2、引入meta标签 &amp;amp;amp;amp;amp;lt;meta name=&amp;amp;amp;amp;quot;viewport&amp;amp;amp;amp;quot; content=&amp;amp;amp;amp;quot;width=device
VueCLI4.x+Vue2.x 使用postcss-px2rem和lib-flexible解决自适应问题 （解决组件样式被修改失效问题）
狮子Ya的大脑
08-11 738
简介 前端页面移动端免不了需要自适应高度宽度字体大小等等，如果直接写rem的话那会很麻烦，前端还需要根据设计图自己去转rem写样式，那样会非常麻烦且不易维护。本文将介绍前端写px像素单位自动转为rem单位。 步骤 一、安装组件 npm install --save postcss-px2rem-exclude npm install --save lib-flexible 安装完成后配置postcss，在这里如果使用在vue.config.js中配置则会导致使用的ui库中的属性也会改变，所以在
vue3+ts postcss-px-to-viewport 兼容第三方ui库
06-08
对于使用第三方 UI 库的情况，如果使用 postcss-px-to-viewport 进行适配，可能会导致 UI 库的样式出现问题。这是因为 UI 库中的样式可能没有经过适配，需要我们手动进行调整。 一种解决方案是使用 postcss-px-to-viewport-exclude 插件，该插件可以排除第三方 UI 库中的样式，不进行适配。具体使用方法如下: 1. 安装插件 ``` npm install postcss-px-to-viewport-exclude -D ``` 2. 配置 postcss.config.js ```javascript module.exports = { plugins: { 'postcss-px-to-viewport-exclude': { viewportWidth: 375, // 视窗的宽度 exclude: /(\/|\\)(node_modules)(\/|\\)/ // 排除 node_modules 目录下的文件 }, autoprefixer: {} } } ``` 3. 在需要适配的样式文件中使用 `/* no */` 注释来排除不需要适配的样式 ```css /* 不需要适配的样式 */ .example { font-size: 16px; /* no */ } /* 需要适配的样式 */ .example { font-size: 32px; } ``` 使用这种方法可以避免第三方 UI 库中的样式被适配，同时保证我们自己编写的样式能够正确适配。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

终极前端开发协会

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值