2015-08-31

关于移动端 rem 布局的一些总结

【资源一】基础知识恕不回顾

基础知识参考以下两篇博客:

http://isux.tencent.com/web-app-rem.html

http://www.w3cplus.com/css3/define-font-size-with-css3-rem

【资源二】淘宝m站首页的动态实现

学习http://m.taobao.com 首页的实现。

最近读到@大漠的新文章《使用Flexible实现手淘H5页面的终端适配》,和本部分有点关系。暂且加上来以供参考。(updated 2015-11-24)

源码进行美化、解读之后,基本布局部分的代码已经被我还原出来了:(2016-01-13补充:后来才发现,早就开源在github上了)

注意: 淘宝首页在iPhone4上设置的initial-scale是0.5(其他尺寸类似)。

因此,这句在iPhone4上得出的结果是640:

正是因为淘宝这种独特的设置,使得 ios 上 1px边框的问题完美解决(1px变2px, 又被 缩小了一半)。

【资源三】常规情况下js根据屏幕宽度动态计算

使用js动态计算:

【资源四】媒体查询较密集的断点

使用css3 media query 实现

【资源五】强大的单位——vw

使用单位 vw 实现动态计算。

不过考虑到国内兼容性的问题,还是结合媒体查询来使用比较好。(媒体查询的断点暂时是借用上面的例子)

图片描述


【总结】

对以上种种方法的综合:

1、meta:viewport, 还是initial-scale为 1;

2、320px屏幕下,把页面根元素html的字体大小设置为50px;

3、鉴于我们拿到的设计图目前是640px宽的基准,这样我们就不用每次自己除以2了,直接在PS中量就好;

4、宽度什么的最好还是用百分比处理;涉及到高度、字体大小之类的则用rem。

eg: 设计稿上,div高度为40px;那么css就是

结果就只剩下一步转换:设计稿上量的长度转化为小数。 这种计算,不要太简单。。。

【方法一】纯粹css,支持calc函数的动态计算;不支持的用css媒体查询断点,优雅降级。

【方法二】脚本动态计算

大前提:

1、initial-scale 为 1;

2、在项目css中(注意不要被公共的base、common之类的影响了,资源加载顺序也是蛮重要的),先把html的fontSize设置为 50px(或者加上媒体查询代码), 避免加载未完成时候样式错乱;

嗯。。。

就这么愉快地结束了。。。

不知道解读了某宝首页的一点点代码,然后发在这里,会不会有什么后果。。。

==================================================

2016年1月13日补充

写过这篇博客之后,又陆续读过几篇关于布局的文章。

具体已经忘了,大约是大漠的文章,还有一篇应该是搜车前端的博文,另外应该还有关于手淘首页的分析的文章。

另外,自己也用rem布局实践过几个项目。

不得不说,个人觉得rem布局现在已经可以放弃了。布局已经很好用了,早已有之的百分比布局等稍用点心思也并不难。

这篇博客一直想改。但懒惰总是占据着我的身体。

最后再说下,字体大小自适应是错误的,字体大小自适应是错误的,字体大小自适应是错误的。

rem 布局,可以告别了。

迎接 flex 布局吧。

=========================================

写在最后

这篇博客写于半年前,那时候还是个刚毕业的菜鸟。

偶尔有点想法,看了一些大牛的文章,有了这篇博客。

这也是半年来唯一一篇产出。

5k的浏览量,95收藏,13推荐,已经让我很惊讶了。

谢谢各路大神们的关注。

半年来感受到的前端大环境变化还是很大。虽然在公司没有太多变化,但眼睛总得看着世界吧。

接下来,还得继续学习。

由于手上没什么项目,一直想探索出一套自己的自动化流程,但到现在也只是积累了许多版的草稿。

方面也得有所探索, 再加上 用起来是真的很爽。(鸣谢阮大神的文章

算是年终总结了。在前端的路上继续走吧。

=========================================

一点想法:评论区的回复

媒体查询和js动态计算是两种方式。

首先,支持 CSS3 方法 和 单位的浏览器下,只需要这样一句就好,另外加个媒体查询限制下。

之前的一大堆密集的断点只是为了hack不支持或者的情况。其次,js动态设置html的,只要浏览器支持rem单位即可。

为什么会考虑到密集的mq断点呢,因为当时还在考虑文字大小的自适应问题。

实践证明,字体大小自适应是一种错误的想法。

移动开发在必要情况的下,可以适当使用mq来调整字体大小,但做成完全自适应则是一种存在问题的做法。

因此,这里提到的 配合的做法,最好只用来做布局的工作。js动态计算也是类似,更适合做布局。