背景

在项目使用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. python内置方法大全

    数学运算 abs:求数值的绝对值 >>> abs(-2) 2 divmod:返回两个数值的商和余数 >>> divmod(5,2) (2, 1) >> ...

  2. Dubbo简介

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  3. [翻译] 使用 Python 创建你自己的 Shell:Part II

    目录 使用 Python 创建你自己的 Shell:Part II 原文链接与说明 步骤 4:内置命令 最后的想法 使用 Python 创建你自己的 Shell:Part II 原文链接与说明 htt ...

  4. Selenium的发展历史及原理

    目录 1. selenium1.0的产生 2. webdriver的产生 3. selenium和webdriver的合并 4. selenium3.0的产生 1. selenium1.0的产生 为什 ...

  5. GoLang simple-project-demo-02

    GoLang 有很多种数据类型:字符型,整型,浮点型,布尔型.下面是基础例子: package main import "fmt" func main() { fmt.Printl ...

  6. 学JAVA第十五天,方法重载及构造方法进一步了解

    由于星期五生病了,所以就没写.今天上课,又来写了!!! 先来说方法的重载. 方法的重载就是有两个方法的方法名相同,但参数不一致,参数个数不一致,或参数的类型不一样. package pkg9;publ ...

  7. JavaScript 是如何工作的:JavaScript 的内存模型

    摘要: 从内存角度理解 let 和 const 的意义. 原文:JavaScript 是如何工作的:JavaScript 的内存模型 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

  8. canvas动态图标

    前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了.而可视化图表,则是 canvas 强大功能的表现之一. 现在已经有了很多成熟的图表插件都 ...

  9. PHP下CodeIgniter框架连接读取MS Access数据库文件

    cI用的是3.0版本,测试用的access为.mdb文件,php要读取Access数据库有两种驱动,一种的odbc,一种是pdo_odbc,两种都可以链接,但是一般会更推荐pdo_odbc, 要想ph ...

  10. Android探究之ANR

    什么是ANR ANR:Application Not Responding,即应用程序无响应. 在Android中,ActivityManagerService(简称AMS)和WindowManage ...