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 call和apply方法
Nov 24 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
node.js通过Sequelize 连接MySQL的方法
Dec 28 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
Terran兵种介绍
2020/03/14 星际争霸
PHP性能优化 产生高度优化代码
2011/07/22 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
JqGrid web打印实现代码
2011/05/31 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Django contenttypes 框架详解(小结)
2018/08/13 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
触摸春天教学反思
2014/02/03 职场文书
幼儿园新年寄语
2014/04/03 职场文书
小学综合实践活动总结
2014/07/07 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2014年建筑工作总结
2014/11/26 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
辩护词范文大全
2015/05/21 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
庆七一主持词
2015/06/29 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
Golang gRPC HTTP协议转换示例
2022/06/16 Golang