详解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 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
在Vue中使用antv的示例代码
Jun 29 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
?生?D片??C字串
2006/12/06 PHP
php目录管理函数小结
2008/09/10 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php 伪静态之IIS篇
2014/06/02 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
JS与框架页的操作代码
2010/01/17 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
python抓取网页中链接的静态图片
2018/01/29 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
2015年优质护理服务工作总结
2015/04/08 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
Python实现数据的序列化操作详解
2022/07/07 Python