详解vue.js移动端配置flexible.js及注意事项


Posted in Javascript onApril 10, 2019

前言

最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结。

主体

flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕

1.安装lib-flexible.js

npm install lib-flexible --save

1.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'

通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了。

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem

这里需要注意几点:

1.检查一下html文件的head中,如果有 meta name="viewport"标签,需要将他注释掉,因为如果有这个标签的话,lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。

2.因为html的font-size是根据屏幕宽度除以10计算出来的,所以我们需要设置页面的最大宽度是10rem。

3.如果每次从设计稿量出来的尺寸都手动去计算一下rem,就会导致我们效率比较慢,还有可能会计算错误,所以我们可以使用px2rem-loader自动将css中的px转成rem

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

1.安装px2rem-loader

npm install px2rem-loader --save-dev

1.配置px2rem-loader

首先找到 build/utils.js文件,在utils.js中添加如下配置

详解vue.js移动端配置flexible.js及注意事项

找到generateLoaders方法,在函数里如下配置

详解vue.js移动端配置flexible.js及注意事项

1.px2rem 用法

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

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

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

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

下面是本人写的实例代码,可以参考

原始代码:

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

编译后生成代码:

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

这样基本配置就完成了,重启项目就可以使用lib-flexible+rem编写移动端页面了

后缀

交个朋友,可以一起进阶前端学习

找到我: GitHub

总结

以上所述是小编给大家介绍的vue.js移动端配置flexible.js及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
小程序分享模块超级详解(推荐)
Apr 10 #Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 #Javascript
Vue中computed、methods与watch的区别总结
Apr 10 #Javascript
JavaScript 性能提升之路(推荐)
Apr 10 #Javascript
详解vue-cli3 中跨域解决方案
Apr 10 #Javascript
js中数组常用方法总结(推荐)
Apr 09 #Javascript
JS隐藏号码中间4位代码实例
Apr 09 #Javascript
You might like
PHP网上调查系统
2006/10/09 PHP
PHP SOCKET编程详解
2015/05/22 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
脚本收藏iframe
2006/07/21 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
浅谈python import引入不同路径下的模块
2017/07/11 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
创先争优活动方案
2014/02/12 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
三问三解心得体会
2014/09/05 职场文书
小学生学习保证书
2015/02/26 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2015年教务工作总结
2015/05/23 职场文书
被告代理词范文
2015/05/25 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis