基于vue-cli配置lib-flexible + rem实现移动端自适应


Posted in Javascript onDecember 26, 2017

安装flexible

npm install lib-flexible --save

引入flexible

在项目入口文件main.js中添加如下代码,引入flexible

import 'lib-flexible'

px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

安装px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

基于vue-cli配置lib-flexible + rem实现移动端自适应

关于importLoaders:如若有疑问,请参考webpack深入与实战4-4

2017.12.8更新说明:是否需要配置importLoaders,可参考最底部的说明。

基于vue-cli配置lib-flexible + rem实现移动端自适应

px2rem 用法

安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。

直接写px,编译后会直接转化成rem ---- 除开下面两种情况,其他长度用这个

在px后面添加/*no*/,不会转化px,会原样输出。 --- 一般border需用这个

在px后面添加/*px*/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个

示例代码

编译前(自己写的代码)

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

编译后(打包后的代码)

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

重启项目,就可以愉快的用设计稿上的px了。

注意:坑

不能在index.html的头部加 name 为 viewport 的 meta 标签,flexible会自动为我们添加!

更新:对外部引入css,px2rem能不能转换rem问题

2017.12.8更新:在实际运用中发现对于外部引入的css文件,有时候px2rem能正常转换,有时候又不能转换,到底是什么原因呢?试验了三种不同的css引入情况,发现第一种能正常转换,二三不能正常转换,至于原因,由于才疏学浅,还是不懂,求大神解答三种引入方式的区别。

如果明白了这些方法,就没必要再配置cssLoader的importLoaders了,因为下面的方法更容易控制外部引入的css是否需要转rem,而更改importLoaders就控制不了了,它会强制转换。

<style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

总结

以上所述是小编给大家介绍的基于vue-cli配置lib-flexible + rem实现移动端自适应,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
js实现弹幕墙效果
Dec 10 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 #Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 #Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 #Javascript
Vue 进入/离开动画效果
Dec 26 #Javascript
You might like
php中time()和mktime()方法的区别
2013/09/28 PHP
PHP发送短信代码分享
2015/08/11 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python文件及目录操作实例详解
2015/06/04 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python实现井字棋小游戏
2020/03/04 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
python switch 实现多分支选择功能
2020/12/21 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
超市业务员岗位职责
2013/12/05 职场文书
社区志愿者心得体会
2014/01/03 职场文书
总经理岗位职责描述
2014/02/08 职场文书
给市场的环保建议书
2014/05/14 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
优秀团员自我评价
2015/03/10 职场文书
消防安全月活动总结
2015/05/08 职场文书
详解Python描述符的工作原理
2021/06/11 Python
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电