公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑方案。

搭建可以参考我的另一篇文章vue-cli 3.0 搭建项目流程,这里就不再另外说明了。下面说明项目搭建成功后的适配方案。

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

一、项目中安装lib-flexible

npm install lib-flexible --save

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

import 'lib-flexible'

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

一、安装postcss-px2rem (一定看完文章再安装不然你会哭o(╥﹏╥)o)

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。

因为前期项目安排不是太赶,ui给的设计图也相对简单,所以自己写了按钮组件之类的,适配还挺好,觉得自己棒棒哒~

直到ui的后续设计图出现时间插件,然后就引入了vant的组件库。

放了一个简单的cell组件,npm run serve项目跑起来,我想哭o(╥﹏╥)o,组件中的样式都变小了,F12看了一下果然组件的样式也都被转换成了rem。

问题

变小的主要原因是第三库 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不是一个写死了的,是一个动态的;就导致这个问题

然后就各种查解决方案,网络上给的解决方案一个是改写第三方库的样式,还有一个就是让flexible不编译第三方库的文件(忽略ui组件库的样式文件)。

解决方案一:

将第三方组件的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"
}
}
},

ok,完成。

以上就是我这个项目的填坑经历,希望对你有用,能少走点弯路 o(*^@^*)o

再补充:

最近在用vuecli3.x搭建项目    安装了postcss-px2rem但是影响了ui组件的样式,网上的方法都试过,总结下

1. postcss-px2rem不能忽略指定文件   需要安装postcss-px2rem-exclude(安装前需要先卸载postcss-px2rem)

npm uninstall postcss-px2rem

npm i postcss-px2rem-exclude -D
2.  在项目搭建的时候要选择配置文件的位置了。

对于 Babel 、 PostCSS 等,都可以有自己的配置文件: .babelrc 、 .postcssrc 等等

或者也可以把配置信息放在 package.json 里面

3. 要是选择独立配置文件的 直接在根目录下  postcss.config.js内修改

exclude  就是要忽略的文件

 
 

4. 最坑的就是你选的配置信息都放在 package.json 里面

我参照网上的方法 把配置放在package.json  根本无效

 
 

之后我查看了postcss-px2rem-exclude 的源码,发现在package.json中加入的配置传过去的是  "/node_moudules/i"是字符串,并不是正则表达式,所以根本无效,我自己试了2中方法均有效

 
 

第一种: 就是删除package.json 中关于postcss的配置

然后在根目录下新建postcss.config.js,把package.json中的postcss配置放到postcss.config.js

同3

module.exports = {

plugins: {

autoprefixer: {},

"postcss-px2rem-exclude": {

"remUnit": 32,

"exclude": /node_modules/i

}

}

}

第二种  就是修改postcss-px2rem-exclude 源码

/node_modules/postcss-px2rem-exclude/lib/index.js 文件 增加如下内容,即可

 
 
 
 

在移动端开发中,常常会用到rem相对单位来做自适应。最常用到一种方法就是使用lib-flexible和px2rem来做到自动转换px单位。具体方法参考上一篇文章(px2rem-loader(Vue:将px转化为rem,适配移动端))。

相对缺陷

但是,这个方法是有缺陷的,当引入第三方UI库时,会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。

 
 
 
 

解决方法:

其实解决方法很简单,让其不转化成rem就可以了。但是怎么做到呢,请往下看。

使用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.jsmodule.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"

}

}

},

最后别忘了把之前配置过的信息删掉。在build-utils.js下,如图:

 
 
 
 

ok,完成。

以上就是我这个项目的填坑经历,希望对你有用,能少走点弯路 o(*^@^*)o

 
 
 

.

vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题的更多相关文章

  1. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  2. 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)

    当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...

  3. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  4. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  5. vue中使用第三方UI库的移动端rem适配方案

    需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...

  6. vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题

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

  7. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

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

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

  9. Flexible实现H5移动端适配小demo

    前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...

随机推荐

  1. 【2019.7.16 NOIP模拟赛 T2】折叠(fold)(动态规划)

    暴力\(DP\) 考虑暴力\(DP\),我们设\(f_{i,j}\)表示当前覆盖长度为\(i\),上一次折叠长度为\(j\)的方案数. 转移时需要再枚举这次的折叠长度\(k\)(\(k\ge j\)) ...

  2. 【redis】分布式锁实现,与分布式定时任务

    如果你还不知道redis的基本命令与基本使用方法,请看 [redis]redis基础命令学习集合 写在前面 redis辣么多数据结构,这么多命令,具体一点,都可以应用在什么场景呢?用来解决什么具体的问 ...

  3. flutter RN taro选型思考

    当前RN已经成熟,但是依赖于大平台(JD.携程),小公司想开箱即用还是有困难的 纯Flutter还远未成熟,更多的是和原生进行混合 但是作为个体又想要在某一个点切入市场,就是需要作选择,基于当下及未来 ...

  4. pg_sql常用查询语句整理

    #pg_sql之增删改查 #修改: inset into table_name (id, name, age, address ) select replace(old_id,old_id,new_i ...

  5. 【转】.Net程序员学习Linux最简单的方法

    有很多关于Linux的书籍.博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...

  6. 数据路由通信--ospf复习

    数据路由通信--ospf 复习 ospf 复习 今天来回顾一下ospf ospf全名叫做开放式最短路径优先协议,它是一种基于链路状态的内部网关路由协议.ospf支持区域的划分,内部的路由器使用spf最 ...

  7. react的模型:react是如何工作的?

    1.jsx:语法模型,语句构建模型: 2.组件:集合模型,组件管理: 3.vdom:分层模型.渲染管理模型: 4.flux:管道模型.数据模型,状态管理模型: 整体上是一个UI系统从上到下的构建: f ...

  8. [转] JS中arr.forEach()如何跳出循环

    我们都知道for循环里要跳出整个循环是使用break,但在数组中用forEach循环如要退出整个循环呢?使用break会报错,使用return也不能跳出循环. 使用break将会报错: var arr ...

  9. winform子窗口与父窗口的交互-使用委托与事件

    实现子窗口与父窗口的交互,通过父窗口调用并控制子窗口,子窗口也能控制父窗口,使用委托和事件的方法,可以实现. 1.父窗口调用子窗口,并通过子窗口控制父窗口 新建工程,创建两个窗体    显示子窗体的代 ...

  10. net dll 重新签名

    已经有强签名的dll或exe程序无法引用无签名的dll,这时候就需要对dll进行签名,签名的步骤如下: 为没有源码的DLL文件添加强名称 如果项目中引用了其他没有源码的dll文件,并且此dll文件是没 ...