基于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制作浮动广告代码
Dec 30 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
通过实例解析js简易模块加载器
Jun 17 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP中动态HTML的输出技术
2006/10/09 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
jquery 指南/入门基础
2007/11/30 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
python中的变量如何开辟内存
2018/06/26 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python实现猜数字游戏
2020/03/25 Python
python的range和linspace使用详解
2019/11/27 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python和js交互调用的方法
2020/06/23 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
英语生日邀请函
2014/01/23 职场文书
群众路线党课主持词
2014/04/01 职场文书
初中家长寄语
2014/04/02 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python