基于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 相关文章推荐
通过JavaScript控制字体大小的代码
Oct 04 Javascript
javascript时区函数介绍
Sep 14 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
理解JavaScript原型链
Oct 25 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 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不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
三爱活动实施方案
2014/03/19 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
大一学生个人总结
2015/02/15 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP