vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

monw3c 发布于2019-08-29 15:09 / 1348人阅读

摘要：使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配，这也是我最喜欢的，但是使用这个方案时，你引入第三方库时样式会变小。。这个坑难的我不行，各种百度，各种想法，差一点就放弃了这个方案。

最近公司的的项目赶，作为前端的小白懒出新的高度，使出专业的技能 --复制粘贴！！（改别人的代码也是煎熬）
我经常做一些H5页面，这样就会遇到适配这个头疼的问题，我分享下我用经常用到的适配方案：
这里就不细说了有大神总结，或者自行百度。

了解真实的『REM』手机屏幕适配

前端：『REM』手机屏幕高清适配方案

hotcss.js移动端适配方案

这个文章也不错

都是大神们智慧的结晶。。。。。。仰望！！！！！

好了废话少说进入正题。
使用vue的小伙伴儿会用到淘宝的开源的适配方案flexible.js + rem + px2rem-loader 去轻松的完成适配，这也是我最喜欢的，但是使用这个方案时，你引入第三方库时样式会变小。。？！！！

这个坑难的我不行，各种百度，各种想法，差一点就放弃了这个方案。

问题

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

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

解决
我们可以把第三方库的css代码px统一扩大2倍，听起来很蠢对吧，我一开始也是折磨想的，有的小伙伴就该说这个的改多少，代码少就无所谓，可是代码不就的累死了。。。
我使用的地vscode这个编辑器有个扩展程序小叫 px-to-rem 这个可算是救世主了他可以让你在2分钟改完所有的代码

第一步下载改默认配置

 "px-to-rem.px-per-rem": 0.5, // 第一步  主要是让1rem 等于0.5px

全选你要改的代码 option+Z 快捷键。（windows我不知道）你会发现所有的px变rem

第二步改默认配置

"px-to-rem.px-per-rem": 1,  //第二步

然后在全选你要改的代码 option+Z 快捷键。（windows我不知道）你会发现所有的rem变px 这个px的值比是原来的2倍

OKok OK

服务器托管 idc机房托管 vue-cli vue-cli3 cdn引入vue 自动构建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113134.html

vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

摘要：使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配，这也是我最喜欢的，但是使用这个方案时，你引入第三方库时样式会变小。。这个坑难的我不行，各种百度，各种想法，差一点就放弃了这个方案。最近公司的的项目赶，作为前端的小白懒出新的高度，使出专业的技能 --复制粘贴！！（改别人的代码也是煎熬）我经常做一些H5页面，这样就会遇到适配这个头疼的问题，我分享下我用经常用到的适配方案：这里...

CodeSheep 2019-08-22 16:42 评论0 收藏0
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三

摘要：使用的小伙伴儿会用到淘宝的开源的适配方案去轻松的完成适配，这也是我最喜欢的，但是使用这个方案时，你引入第三方库时样式会变小。。这个坑难的我不行，各种百度，各种想法，差一点就放弃了这个方案。最近公司的的项目赶，作为前端的小白懒出新的高度，使出专业的技能 --复制粘贴！！（改别人的代码也是煎熬）我经常做一些H5页面，这样就会遇到适配这个头疼的问题，我分享下我用经常用到的适配方案：这里...

loostudy 2019-08-02 10:16 评论0 收藏0
webpack手动构建vue和vue-cli构建使用 px2rem-loader ,全局自动转换px

摘要：做移动端时，适配是必须的。使用单位，可在不同屏幕上完美显示相同的布局。文件首先要把转成正常的，在交给来做，所以是外还需要加上一个设计稿宽度表示转换过程小数保留几位。安装配置结束后，重启项目。会发现自己设置的被转为了。做移动端时，适配是必须的。使用rem单位，可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。 1. 自己手动构建vue webpck配置...

AWang 2019-08-30 14:16 评论0 收藏0
vue中使用第三方UI库的移动端rem适配方案

摘要：需求使用脚手架搭建项目，并且使用第三方的库比如，的时候，因为第三方库用的都是用单位，无法使用适配不同设备的屏幕。解决办法使用插件将第三方库的转换成单位。否则会出现混乱页面。需求：使用vue-cli脚手架搭建项目，并且使用第三方的UI库（比如vant，mint ui）的时候，因为第三方库用的都是用px单位，无法使用rem适配不同设备的屏幕。解决办法：使用px2rem-loader插件...

littleGrow 2019-08-29 15:39 评论0 收藏0
vue中使用第三方UI库的移动端rem适配方案

摘要：需求使用脚手架搭建项目，并且使用第三方的库比如，的时候，因为第三方库用的都是用单位，无法使用适配不同设备的屏幕。解决办法使用插件将第三方库的转换成单位。否则会出现混乱页面。需求：使用vue-cli脚手架搭建项目，并且使用第三方的UI库（比如vant，mint ui）的时候，因为第三方库用的都是用px单位，无法使用rem适配不同设备的屏幕。解决办法：使用px2rem-loader插件...

BWrong 2019-08-05 14:08 评论0 收藏0