基于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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JS控制输入框内字符串长度
May 21 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
Node.js返回JSONP详解
May 18 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
PHP使用函数用法详解
2018/09/30 PHP
php经典趣味算法实例代码
2020/01/21 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python中的decorator的作用详解
2018/07/26 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
解决python 找不到module的问题
2020/02/12 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
园长自我鉴定
2013/10/06 职场文书
庆八一活动方案
2014/01/25 职场文书
企业管理培训感言
2014/01/27 职场文书
我的小天地教学反思
2014/04/30 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
文明旅游倡议书
2015/04/28 职场文书
花田少年史观后感
2015/06/16 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书