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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
js实现简易聊天对话框
Aug 17 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 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
php数字运算验证码的实现代码
2015/07/30 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
React组件生命周期详解
2017/07/03 Javascript
详解vue中组件参数
2018/07/09 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
es6数值的扩展方法
2019/03/11 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python登录系统界面实现详解
2019/06/25 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python 动态调用函数实例解析
2019/10/21 Python
python的faker库用法
2019/11/28 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
矿泉水广告词
2014/03/20 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
交通安全横幅标语
2014/10/07 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL