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 相关文章推荐
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
javascript实现留言板功能
Feb 08 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
初品cakephp 入门基础
2012/02/16 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php设计模式之委托模式
2016/02/13 PHP
如何打开php的gd2库
2017/02/09 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python虚拟环境完美部署教程
2019/08/06 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
护理自我鉴定范文
2013/10/06 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
广播体操比赛口号
2014/06/10 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
先进党支部申报材料
2014/12/24 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL