背景

在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题。那些组件库的样式都变小了。

问题原因

变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

这时我们使用的flexible引入时 data-dpr不是一个写死了的,是一个动态的;就导致这个问题

解决方式

postcss.config.js中过滤node_modules

具体实现步骤:

第一部分:项目中引入lib-flexible

一、项目中安装lib-flexible

npm install lib-flexible --save

二、在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

第二部分:使用postcss-px2rem自动将css中的px转换成rem

一、安装postcss-px2rem

npm install postcss-px2rem --save-dev

二、项目配置postcss

项目开始在vue.config.js(项目创建完初始是没有这个js文件的,需要自己手动创建)中配置的,上代码

module.exports = {
css: {
loaderOptions: {
postcss: {
// 这是rem适配的配置  注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}

初始的适配方案就完成了,然后可以直接在css或.vue文件中写已px为单位的样式了,到浏览器会自动转为rem。

but but 引入vant的组件库后,问题来了。

试着放了一个简单的cell组件,npm run serve项目跑起来,组件中的样式都变小了,F12看了一下果然组件的样式也都被转换成了rem。

 

解决方案一:

将第三方组件的css文件复制出来第三方库的css代码px统一扩大2倍,或者用全局替换将px替换为px/*no*/。这个方案不太好,具体操作可以参考以下两篇文章:https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。

解决方案二:

使用postcss-px2rem-exclude
 
首先,需要卸载项目中的postcss-px2rem。
npm  uninstall postcss-px2rem --save-dev

其次,安装postcss-px2rem-exclude

npm  install postcss-px2rem-exclude --save

后是配置exclude选项,需要注意的是这个配置在vue.config.js中式不起作用的,如图。

正确的配置位置是项目根目录下的postcss.config.js文件,如果你的项目没有生成这个独立文件,就需要在你的package.js里设置。

postcss.config.js

module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
};
package.json

"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
},

本篇文字就到这里了,动手试试~

vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题的更多相关文章

  1. Angular第三方UI组件库------ionic

    一.Angular  UI组件库  ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...

  2. 属性.native用于解决第三方el组件库@click事件无效

    描述 有时发现用一些第三方的组件库时,例如一个封装好的button按钮<el-butten>,绑定点击事件却没有任何作用,这时便需要加 .native 原因: v-on 是对 Vue 的事 ...

  3. vux 是基于 WeUI 和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

    https://doc.vux.li/zh-CN/ https://vux.li/

  4. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  5. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  6. 【转】优秀的Vue UI组件库

    原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...

  7. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  8. ui组件库

    基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...

  9. vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案

    最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...

随机推荐

  1. mysql的学习笔记(一)

    前言 开发中经常用mysql和SQL server交替使用,自己都产生知识的混乱.在这里重新整理下mysql的知识,也是梳理自己知识点,因为是学习笔记,所以并不会使用到图形化管理工具.mysql的安装 ...

  2. [intellij IDEA]导入eclipse项目

    1.因为最近eclipse在更新代码时经常卡死,就想将eclipse的项目迁移到idea.特意写下自己的经验,给迁移时遇到困难的朋友一些帮助 File -> new ->project f ...

  3. 【Android Studio安装部署系列】三十一、从Android studio3.0.0升级到Android studio3.0.1

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 突然想要升级到较高版本.要跟随潮流嘛,不然就落后了. 下载IDE http://www.wanandroid.com/tools/i ...

  4. [翻译] 介绍EF Core

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  5. Nginx 简单记录

    Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...

  6. DSAPI 远程协助之获取当前鼠标指针坐标及样式

    在编写远程协助类软件时,除了获取屏幕画面外,还需要获取鼠标当前的坐标以及当前的指针样式,以便让远程屏幕知道当前的操作状态. 使用DSAPI内置的鼠标指针类,可轻松获取. 代码如下: Imports D ...

  7. 引用KBC.PetroSIM.Interop的dll,在代码中调用时出现 80040154 没有注册类 的错误

    失败的尝试: regsvr32注册:模块已加载,但找不到入口点DllRegisterServer regasm注册:需写上regasm的完整路径,注册成功,但问题依旧 将项目的平台改为x86:问题依旧 ...

  8. [转]How to: Create a Report Server Database (Reporting Services Configuration)

    本文转自:https://docs.microsoft.com/en-us/previous-versions/sql/sql-server-2008-r2/ms157300%28v%3dsql.10 ...

  9. 无需***,轻松提速 Github

    无需***,轻松提速 Github 众所周知,Github 是全球程序员最喜欢访问的网站之一,但是在国内,会很容易出现一个水土不服的局面 -- 下载不了(稍微大一点中途就报错了),下载速度慢 .... ...

  10. c# 图片加水印

    /// <summary> /// 图片水印 /// </summary> /// <param name="imgPath">服务器图片相对路 ...