vue写h5页面的方法总结
下面就是小编带给大家的如何用vue写h5页面方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。
1、当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。
2、之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等，动态调节html的font-size大小。
3、方案总结为：根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，接着根据屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分，每份为a，1rem就等于10a。
4、通常我们会拿到750宽的设计稿，这是基于iPhone6的物理分辨率。有的设计师也许会偷懒，设计图上面没有任何的标注，如果我们边开发边量尺寸，无疑效率是比较低的。要么让设计师标注上，要么自食其力。
5、如果设计师实在没有时间，推荐使用markman进行标注，免费版阉割了一些功能（比如无法保存本地）不过基本满足了我们的需求了。
6、标注完成后开始写我们的样式，使用了淘宝的lib-flexible库之后，我们的根字体基准值就为750/100*10 = 75px。此时我们从图中若某个标注为100px，那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率，可以使用px转化为rem的插件。如果你使用sublimeText，可以用 rem-unit。
如果大家学习后有任何疑问可以在下面的留言区讨论，感谢大家对脚本之家的支持。
相关文章
这篇文章主要为大家详细介绍了Vue中自定义指令directive的使用方法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-04-04
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
本文给大家介绍Vue3中setup()函数中声明变量的几种方法,希望本文能够帮助你更好地理解Vue3的开发方式,感兴趣的朋友跟随小编一起看看吧2023-11-11
electron踩坑之remote of undefined的解决
这篇文章主要介绍了electron踩坑之remote of undefined的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
本文主要介绍了VUE3之Non-Props属性的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了Vue中的$nextTick的相关资料，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
今天小编就为大家分享一篇基于form-data请求格式详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了Vue.use()的作用及原理解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
解决vue prop传值default属性如何使用,为何不生效的问题
这篇文章主要介绍了解决vue prop传值default属性如何使用,为何不生效的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了el-date-picker日期范围限制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论