vue写h5页面的方法总结-创新互联
下面就是小编带给大家的如何用vue写h6页面方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比六合网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式六合网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖六合地区。费用合理售后完善,10年实体公司更值得信赖。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写h5页面的方法总结-创新互联
URL标题:http://myzitong.com/article/pedeh.html