详解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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
javascript学习之json入门
Dec 22 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
小程序分享模块超级详解(推荐)
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数组中的重复值的实现代码
2011/07/17 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
angular.js分页代码的实例
2016/07/27 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
公司领导推荐信
2013/11/12 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
家长通知书家长意见
2014/12/30 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
收入证明怎么写
2015/06/12 职场文书