px2rem 第三方库实践

Vue 项目搭配lib-flexible 和 px2rem 来实现移动端项目的适配应该是很多公司目前采用的一种移动端适配解决方案。这种方法的常规webpack配置百度上有很多文章都有教程，大家可以按照那些教程一步一步配置。我在这里就不多说了，如果大家实在懒得找可以查看这篇文章：传送门。

但是采用px2rem插件有两个需要注意的地方：

1. 对于项目内的行内样式它是无法将px单位自动转化为rem的。

请看下面的例子:

<mu-form-item label="密码" class='item' style='margin-top: 36px;'><mu-text-field type="password" v-model="form.psd"></mu-text-field>
</mu-form-item>复制代码

项目编译之后margin-top:36px是不会自动转化为rem表示的。

2. 如果项目使用了第三方库，那么第三库的样式将会受影响。

关于这个问题我自己百度查阅了一些资料，但是感觉没有找到特别仔细的教程，因此我自己个人总结了一下，希望能帮到大家。目前关于这个问题大概有三种解决方案：

将第三方库的CSS文件拷贝出来，然后将拷贝出来的文件里面的px全部替换为大写的PX。然后引用修改后的文件。
同样将第三方库的CSS文件拷贝出来，然后手动将拷贝出来文件里面以px为单位的数值全部*2.然后引用修改后的文件。详细的可以查看这篇文章：传送门。
个人感觉是目前比较好的一个解决方案。通过postcss-px2rem-exclude插件，exclude掉node_modules里面的文件。具体的步骤大家可以跟着下面的内容：

如果项目之前有用px2rem,大家可以先卸载掉px2rem插件和删掉对应的配置代码

npm  uninstall postcss-px2rem --save-dev复制代码

安装postcss-px2rem-exclude

npm  install postcss-px2rem-exclude --save复制代码

配置postcss-px2rem-exclude

如果大家是用vue-cli手脚架的话，请找到'../build/vue-loader.conf.js'。然后将里面的配置修改成如下：

exclude里面大家可以将文件目录自行修改为需要的文件目录。

重启项目，完成收工

以上就是个人的一些见解，如果有不对的地方欢迎指正。希望这篇文章能帮到大家，谢谢~~

转载于:https://juejin.im/post/5c2db1efe51d456ee162d18e

px2rem 第三方库实践相关推荐

Autolayout第三方库Masonry的入门与实践
在如今的iOS开发中,Autolayout已经是不得不使用了,而且是我们主动的去拥抱Autolayout.使用Autolayout最普遍的方式就是在xib或者storyboard中可视化的添加各种约束 ...
‘pip 安装第三方库速度太慢’的解决办法
写在这里的初衷,一是备忘,二是希望得到高人指点,三是希望能遇到志同道合的朋友. 目录 pip 安装第三方库速度太慢设置方法,以清华镜像源为例: pip 安装第三方库速度太慢可设置 pip 从国内的 ...
Python 读写操作Excel —— 安装第三方库（xlrd、xlwt、xlutils、openpyxl）
数据处理是 Python 的一大应用场景,而 Excel 则是最流行的数据处理软件.因此用 Python 进行数据相关的工作时,难免要和 Excel 打交道. 如果仅仅是要以表单形式保存数据,可以借助 ...
PCL第三方库：Eigen, Flann , Qhull, VTK, Boost简介
前言: PCL作为机器人软件的一个基础类库,融合了基础结构.算法和三维显示.其大量使用第三方库,使用了Boost.Eigen.Flann.VTK.Boost.CUdnn等. 第一预备役:Boost ...
非常实用的安卓第三方库
前言: 为了提高开发效率,我们经常会考虑实用第三方开发库,因为,这样可以大大减少开发周期,更是彼此学习的一个几乎,下面是我搜集的几个非常实用的开源库,非常感谢大牛的无私奉献. 1.严振杰首页,里面包含 ...
automake生成静态库文件_基于CocoaPods的组件化原理及私有库实践
轮子为什么会存在智人能在残酷的进化大战中存活下来,原因之一就是智人懂得将知识沉淀成外物,辅助彼此之间的合作,从而使得整个群体产生了规模效应,即1+1>2的效果. 从一个角度上说,石器时代是基于 ...
中文分词第三方库_Python计算生态jieba库和random库的综合运用之爬山篇
本篇文章会利用python语言中的第三方库jieba库和标准库random库来对文件中的相关元素进行操作. 实践中文片段:"今天是个好天气,大家一起去爬山."该句子分为上下两部分, ...
Drupal第三方库jQuery UI起死回生，多个漏洞影响网站、企业产品等
聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士专栏·供应链安全数字化时代,软件无处不在.软件如同社会中的"虚拟人",已经成为支撑社会正常运转的最基本元素之一,软件的安全 ...
[转载] 20个常用Python库及200个第三方库
参考链接: 使用Python在Linux Terminal中格式化文本 Requests.Kenneth Reitz写的最富盛名的http库.每个Python程序员都应该有它 Scrapy 如果你从事 ...
QtXlsx第三方库在Mac OS和Windows下的配置及简单使用
这里是小白一只,为了参与项目,最近自学了一点qt.要求先做一个实现excel导出的小demo,由于还没看到这部分知识的内容,在书里反复查找也没找到确切的内容,所以开始在网上看了很多博客. 了解到 QA ...

px2rem 第三方库实践

1. 对于项目内的行内样式它是无法将px单位自动转化为rem的。

2. 如果项目使用了第三方库，那么第三库的样式将会受影响。

px2rem 第三方库实践相关推荐

最新文章

热门文章