热门关键字:
jquery > jquery教程 > jquery教程 > 移动端H5终端适配方案

移动端H5终端适配方案

402
作者:管理员
发布时间:2021/4/24 17:45:57
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4566
  1.JS的根据不同屏幕宽度动态设置html的font-size,使用rem布局。


  a.手淘方案 flexible+rem(参考


  引入flexible.js,不需要在html结构中加入viewport标签。


  flexible.js会在元素上增加一个data-dpr属性,以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值,比如说2或者3;同时会给html加上对应的font-size的值,比如说75px;以及会添加viewport标签,JS会根据不同的设备添加不同的缩放比(建议内联处理,在所有资源加载之前执行这个JS)


  一般用于解决 “数据大屏“ 展示的屏幕适配问题: 解决 “数据大屏“ 展示的屏幕适配问题


  b.不引入第三方库,自写js动态设置html的font-size+rem


  js会根据不同设备的宽度设置html的font-size,html结构需要加入


  屏幕根据设计稿的比例转换对应的rem值,比如:


  750的设置 = 16*(clientWidth/375)


  640的设置 = 20*(clientWidth/320)


  320的设置 = 10*(clientWidth/320)


  2.flex布局,不使用rem,直接使用px。


  html结构需要加入


  例如:设计稿是750px宽度,设计稿是750px宽度(基于iphone6 375*2=750 得到的设计稿),


  如果设计稿中量出某块区域的margin-top值20px,


  在实际iphone6设备375px宽度中,应该除以2,所以得到值mragin-top是20/2=10px。


  css代码中就是margin-top:10px。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐