vue中移动端使用postcss-px2rem与ui组件冲突问题（亲测有效）

最新推荐文章于 2024-05-31 10:42:12 发布
最新推荐文章于 2024-05-31 10:42:12 发布
阅读量1.5k 收藏
点赞数
分类专栏： 插件 文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36017964/article/details/106155910
版权

在vue移动开发中，使用px2rem-loader，会自动将px单位换算成rem，但是存在一个问题，会将第三方UI库的px单位转为rem。

引入 import 'lib-flexible'

解绝方式：

1. 将UI组件中的px全部改为PX，或者在px后加 /*no*/.

2. 在框架中使用postcss-px2rem-exclude插件，添加exclude属性。

在vue-cli2.x中配置： 

在vue-cli3.0中配置：

删除package.json中的

  "postcss": {

    "plugins": {

      "autoprefixer": {}

    }

  },

前端热爱者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue移动端适配并解决rem影响第三方ui库样式问题
weixin_44602430的博客
10-22 831
Vue移动端适配并解决rem影响第三方ui库样式问题 一、项目中安装lib-flexible npm install lib-flexible --save 二、在项目的入口main.js文件中引入lib-flexible import 'lib-flexible' 三、安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save 四、配置 postcss-px2rem-exclude 1.在项目的根目录下找到文件.postcss
Vue-cli3.X使用px2 rem遇到的问题及解决方法
01-19
把项目脚手架升级为cli3.X了以后，模板简洁了很多，运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候，我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢？ 首先，我们应该用NPM来安装postcss-px2rem npm i postcss-plugin-px2rem  --save -dev 然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.X中。去掉了build和config文件夹。所有的配置都放到了vue.config.js，然而这个文件脚手架并没有生成，所以需要手动在项目的根目录创建一个文件
vue中移动端使用postcss-px2rem与ui组件冲突问题
Kerwin_yue的博客
03-14 5938
在vue移动开发中，使用px2rem-loader，会自动将px单位换算成rem，但是存在一个问题，会将第三方UI库的px单位转为rem。
Vue 项目引入px2rem插件并配置
weixin_59685936的博客
05-31 324
Vue 项目引入px2rem插件并配置
react 的 router && rem解决方案&& antd-mobile组件库在React中的使用@stage3---week5--day3
weixin_45549481的博客
10-24 633
react 的 router rem 使用组件库 antd-mobile react 的 router 先构建页面 目录 components 公用组件 layout 布局组件 utils 封装工具 rem request pages/views 路由对应的页面 移动端是要配置自适应的 rem + 弹性盒 淘宝方案 https://github.com/amfe/lib-...
postcss vant组件库 冲突问题
sam的博客
03-14 1017
https://www.cnblogs.com/zhangnan35/p/12682925.html
vue-cli 使用postcss-px2rem导致vue组件引入css失败
阿之阿佐
05-20 5629
postcss-px2rem插件配置不当引起的；在vue-loader.config.js增加了两个配置'use strict' const utils = require('./utils') const config = require('../config') const isProduction = process.env.NODE_ENV === 'production' const s...
vue-cli3 中postcss-px2rem影响ui组件样式的解决方案
weixin_39944458的博客
11-29 8727
问题：引入postcss-px2rem依赖后，vant组件库的样式变的很小 原因：依赖会把组件中px自动转换为rem，而实际组件自身已经做过适配，画蛇添足了 解决：把postcss-px2rem依赖卸掉，安装依赖postcss-px2rem-exclude，并修改配置文件package.json "postcss": { "plugins": { "au...
postcss-px2rem vantjs 样式大小显示问题
Young_Gao的博客
06-25 6649
当postcss-px2rem 的 rootValue 设置为 75 或者 37.5 的时候， 会发现整个都显得特别小 解决办法，postcss.config.js 中如下配置 const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-pxtorem"); module.exports =...
使用PostCSS做网页适配时，设计稿于vant组件默认px宽度不一致解决方法
BiuBiu_Ka
07-09 1021
/** * PostCSS 配置文件 */ module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 autoprefixer 插件 // 作用：生成浏览器 CSS 样式规则前缀 // VueCLI 内部已经配置了 autoprefixer 插件 // 所以又配置了一次，所以产生冲突了 // 'autoprefixer': { // autoprefixer 插件的配置 // //
nuxt项目中使用postcss-px2rem踩坑记
热门推荐
图解前端的博客
03-16 1万+
最近准备使用nuxt开发一个移动端的项目，在做技术调研时发现一款可以自动适配px和rem的神器，名为postcss-px2rem。于是，怀着激动的心情我开始了px2rem 的采坑记。 第一步下载： npm install postcss-px2rem –save 第二步引入项目：(经过测试这步可以 省去) const px2rem = require(‘postcss...
vue中使用第三方UI库的移动端rem适配方案
weixin_34112900的博客
06-09 1099
需求：使用vue-cli脚手架搭建项目，并且使用第三方的UI库（比如vant，mint ui）的时候，因为第三方库用的都是用px单位，无法使用rem适配不同设备的屏幕。 解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。 (1) npm install px2rem-loader --save-dev ...
基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem
weixin_30632899的博客
11-13 522
1，安装 flexible和 postcss-px2rem（命令行安装） npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途： flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maxi...
vue移动端适配之rem解决方案
huangzhixin1996的博客
05-30 1159
关于移动端适配方案之一
vue3移动端适配的解决方案
weianl的博客
12-03 1万+
最近在给公司内部做一个BBS论坛，需要在电脑和手机上都可以操作，所以需要做移动端的适配，下面是我在开发后觉得不错的一些解决方案，分享给大家。
vue移动端rem适配--附带引入第三方库解决方案
qiuzhf
02-25 3101
一、先上解决方案： 移动端适配我采用淘宝的一套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
vue-cli3.0用lib-flexible、postcss-px2rem-exclude实现移动端适配，解决第三方ui库样式变小问题,如：vant
一纸奇文的博客
11-21 2509
第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible npm install lib-flexible 二、在项目的入口main.js文件中引入lib-flexible import 'lib-flexible' 第二部分：使用postcss-px2rem-exclude自动将css中的px转换成rem 一、安装postcss-px2rem-exc...
Vue使用lib-flexible做手机端自适应以及引用lib-flexible导致第三方Ui库缩小
hql1024的博客
03-11 802
第一步 在项目中安装lib-flexible npm install lib-flexible --save 第二步 在main.js中引入lib-flexible import 'lib-flexible/flexible.js' 第三步 去index.html里把meta name=“viewport标签注释掉” <!-- <meta name="viewport" conte...
vue2使用postcss-pxtorem让移动端兼容pc端
最新发布
06-06
Vue 2中使用PostCSS-pxtorem插件是为了实现像素单位（px）到相对单位（如rem）的转换，从而提高响应式设计的灵活性，使得在移动端和PC端都能保持一致的样式。这样做有助于在不同屏幕尺寸上保持良好的可读性和布局...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值