详解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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
分享Javascript实用方法二
Dec 13 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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
咖啡语言
2021/03/03 咖啡文化
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
jQuery操作input值的各种方法总结
2013/11/21 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
python实现杨辉三角思路
2017/07/14 Python
Python SQLite3简介
2018/02/22 Python
Python3多线程操作简单示例
2018/05/22 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python db类用法说明
2020/07/07 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
刑事上诉状范文
2015/05/22 职场文书
2015年教师节感言
2015/08/03 职场文书
小学数学教学随笔
2015/08/14 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
导游词之杭州西湖
2019/09/19 职场文书
python实现简易名片管理系统
2021/04/11 Python