本文是关于使用Vue.js开发H5页面的经验总结，主要探讨了移动端布局方案，包括网易和淘宝的适配策略。介绍了如何根据设计稿进行布局，以及如何利用rem单位和转换插件提高开发效率。同时提到了使用rem单位时的注意事项，如字体单位推荐使用px，border等效果使用px单位，并给出了不同场景下选择单位的实例。
vuejs开发H5页面总结
关于布局方案
当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。
网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等，动态调节html的font-size大小。
淘宝的方案总结为：根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，接着根据屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分，每份为a，1rem就等于10a。
通常我们会拿到750宽的设计稿，这是基于iPhone6的物理分辨率。有的设计师也许会偷懒，设计图上面没有任何的标注，如果我们边开发边量尺寸，无疑效率是比较低的。要么让设计师标注上，要么自食其力。如果设计师实在没有时间，推荐使用 添加markman进行标注，免费版阉割了一些功能（比如无法保存本地）不过基本满足了我们的需求了。
标注完成后开始写我们的样式，使用了淘宝的lib-flexible库之后，我们的根字体基准值就为750/100*10 = 75px。此时我们从图中若某个标注为100px，那么css中就应该设置为100/75 = 1.
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
