vue写h5页面的方法总结


Posted in Javascript onFebruary 12, 2019

下面就是小编带给大家的如何用vue写h5页面方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看。

vue写h5页面的方法总结

1、当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适配。

vue写h5页面的方法总结

2、之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的font-size大小。

vue写h5页面的方法总结

3、方案总结为:根据设备设备像素比设置scale的值,保持视口device-width始终等于设备物理像素,接着根据屏幕大小动态计算根字体大小,具体是将屏幕划分为10等分,每份为a,1rem就等于10a。

vue写h5页面的方法总结

4、通常我们会拿到750宽的设计稿,这是基于iPhone6的物理分辨率。有的设计师也许会偷懒,设计图上面没有任何的标注,如果我们边开发边量尺寸,无疑效率是比较低的。要么让设计师标注上,要么自食其力。

vue写h5页面的方法总结

5、如果设计师实在没有时间,推荐使用markman进行标注,免费版阉割了一些功能(比如无法保存本地)不过基本满足了我们的需求了。

vue写h5页面的方法总结

6、标注完成后开始写我们的样式,使用了淘宝的lib-flexible库之后,我们的根字体基准值就为750/100*10 = 75px。此时我们从图中若某个标注为100px,那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率,可以使用px转化为rem的插件。如果你使用sublimeText,可以用 rem-unit。

vue写h5页面的方法总结

如果大家学习后有任何疑问可以在下面的留言区讨论,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
jquery中post方法用法实例
Oct 21 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
redux-saga 初识和使用
Mar 10 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
js瀑布流布局的实现
Jun 28 Javascript
js实现电灯开关效果
Jan 19 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 #Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 #Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 #Javascript
图文详解vue框架安装步骤
Feb 12 #Javascript
详解vue组件中使用路由方法
Feb 12 #Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 #Javascript
详解Vue用cmd创建项目
Feb 12 #Javascript
You might like
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php实现文件上传基本验证
2020/03/04 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
python字符串排序方法
2014/08/29 Python
Python中的包和模块实例
2014/11/22 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
python实现定时提取实时日志程序
2018/06/22 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
网络编辑岗位职责范本
2014/02/10 职场文书
爱祖国演讲稿
2014/05/04 职场文书
电子信息工程自荐信
2014/05/26 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
汽车转让协议书
2015/01/29 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书