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

Chase620 等级 384 0 0

vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题 公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了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" 时写的尺寸

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

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

解决方案一: 将第三方组件的css文件复制出来第三方库的css代码px统一扩大2倍,或者用全局替换将px替换为px/no/。我觉的这个方案不太好没有采用,具体操作可以参考以下两篇文章:segmentfault.com/a/119000001…blog.csdn.net/weixin_4246…

解决方案二: 使用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

本文转自 https://www.jianshu.com/p/30052dee27f1,如有侵权,请联系删除。

收藏
评论区

相关推荐

基于create-react-app打包编译自己的第三方UI组件库并发布到npm
前言 这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件,并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm,供他人使用,就比如elementUI或者Ant Design。 如果想学习如何发布一个js库或者框架,那么使用rollup更为适合,可以参考如下文章: 前端组
《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, antdesignvue, iView等成熟的UI框架, react生态的antdesign, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和
前端 后端的区别
前台:眼睛看到的东西 关乎体验感。 后台:给管理人看的玩意 前端:程序员在进行编程的时候的代码编写。 后端:对应前端而言的,编写代码基本上是提供给前端调用,是不需要处理UI的内容.
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
vuecli3.0结合libflexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题 公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vuecli3.0结合libflexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己
Vue UI组件库对比与选择
主流组件库对比PC端| UI组件库名 | github star | 是否可自定义主题 | 是否支持vue3 | 发布时间 | 稳定性 | 贡献者 || | | | | | | || | | 可自定义 | 支持,beta版本,, | 201608,4年半 | 长期支持,最新两个
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue组件(30)封装一下数据列表的控件
UI库的 table好像前端喜欢叫 table,而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义,UI库的table也是有其他的功能的。而数据列表控件其实也没啥好封装的,各种功能UI库都提供了,一般使用也是很方便的,只是为了我的那种想法还是需要小小的封装一下。功能 锁定行列(UI库自带) 多选(整理)
React 之Virtual DOM 及内核
什么是 Virtual DOM?Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做。这种方式赋予了 React 声明式的 API:您告诉 React 希望让 UI 是什么状态,React 就确保 DOM 匹
Flutter - 深入理解setState更新机制
基于Flutter 1.5的源码剖析, 分析flutter的StatefulWidget的UI更新机制,相关源码:widgets/framework.dartwidgets/binding.dartscheduler/binding.dartlib/ui/window.dartflutter/runtime/runtime_controller.c
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
5款vue前端UI框架
Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue前端ui框架。TOP5——VueBluVueBlu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵
Qt制作简单的无边框登陆窗口
使用qt做简单的登录窗口 环境: win10 Qt5创建项目: 选择Widget类 勾选ui界面因为我是用的默认类名所以类名是Widget以下是Widget.hc++ifndef WIDGETHdefine WIDGETHinclude <QWidgetnamespace Ui class Widget;class Widget : public QWidg
Qt制作简单配置窗口
在上一篇登录操作之后新建设计类记录用户信息及服务端连接信息头文件cppifndef CLIENTCONFIGHdefine CLIENTCONFIGHinclude <QWidgetinclude <QDialoginclude"fileoperation.h"namespace Ui class clientconfig;class clientconfi