详解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 相关文章推荐
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
Postman的下载及安装教程详解
Oct 16 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php防注
2007/01/15 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
解析php中memcache的应用
2013/06/18 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
基于zepto.js简单实现上传图片
2016/06/21 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python学生管理系统
2019/01/30 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
python识别验证码的思路及解决方案
2020/09/13 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
电钳专业个人求职信
2014/01/04 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
建党伟业观后感
2015/06/01 职场文书