chaihongjun.me

MobileWeb适配之路

   最近博主在研究更先进的mobileWeb页面自适应方法,以前是使用的定宽方法,看到网上有三篇文章《手机端页面自适应解决方案—rem布局》《手机端页面自适应解决方案—rem布局进阶版(附源码示例)》和《MobileWeb 适配总结》,也许博主理解能力太差了,第二篇文章的方法就是没掌握,第一篇文章的的方法作者说已经过时了,所以就不去细细探究了。最后,幸好学会了最后那篇文章的方法。

MobileWeb适配之路

   一句话概括使用方法:在页面头部尽早加载指定的JS文件,不要手动指定viewpoint。然后写入转换之后的尺寸(所有PX单位,不仅限于元素),其他布局照常进行。

页面单位换算方法说明:假设设计稿的宽度是640px,那么换算基准单位就是(640px/16px=40),也就是1rem=40px。如果元素是(100px*50px),那么它换算之后的相对单位就(100px/(640px/16px)=2.5rem,50px/(640px/16px)=1.25rem)。这里的16px是大部分浏览器的默认字体的大小,换算的时候不能改变这个参数值。如果设计稿宽度是1000px,(100px*50px)相对单位就是(100px/(1000px/16px)=1.6rem,50px(1000px/16px)=0.8rem),以此类推。

   总结换算方法和单位:

  元素的rem单位=元素在设计稿中实际测量px/(设计稿宽度px/16px)(这里的元素不仅是html元素,指代所有有px单位属性的元素或属性等)

也许你会说,每次写完px单位还要再换算成rem,是多么的麻烦啊。这个好解决,推荐使用sublime的一个插件cssrem,该插件默认换算单位是100,当然也可以自定义,比如上面的例子,设计稿是640px,换算单位是(640px/16px=40),因此只要先自定义设置好换算单位是40即可,然后再布局的时候输入元素的测量单位px值,就会自动的转换成rem单位。

  附件是博主做的百度IFE的stage1,task11的习题,稍微有点瑕疵,习题地址:http://ife.baidu.com/task/detail?taskId=11

MobileWeb适配之路ife_stage1_task11.zip

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»