基于 rem 开发移动端响应式页面

作者:赵金添 分类: 前端 发布于:2015-10-22 11:34 ė1454次浏览 60条评论
示例代码:
【方法一】纯粹css,支持calc函数的动态计算;不支持的用css媒体查询断点,优雅降级。
http://my.codelab.cn/2015-10-22/app-1.html

【方法二】脚本动态计算
(注意:先把html的fontSize设置为 50px(或者加上媒体查询代码), 避免加载未完成时候样式错乱;)
http://my.codelab.cn/2015-10-22/app-2.html


------------------

参考:
http://segmentfault.com/a/1190000003690140

摘录:
你肯定会说,百度Google搜出来的文章,大部份是让设置为html{font-size:62.5%}。他的作用也是把html设置成10px,但万一哪个浏览器2b升级成默认文字大小不是16px怎么办?而且可以直接设置成10px,为什么要去用62.5%算成10px?这不是脱裤子放屁吗?所以我都是直接设置10px。

rem 兼容表:
http://caniuse.com/#feat=rem

总结:
1、meta:viewport, 还是initial-scale为 1;
2、320px屏幕下,把页面根元素html的字体大小设置为50px;
3、鉴于我们拿到的设计图目前是640px宽的基准,这样我们就不用每次自己除以2了,直接在PS中量就好;
4、宽度什么的最好还是用百分比处理;涉及到高度、字体大小之类的则用rem。

eg:
设计稿上,div高度为40px;那么css就是 div {height: 0.4rem;}
结果就只剩下一步转换:设计稿上量的长度转化为小数。 50% => 0.5 这种计算,不要太简单。。。

评论回复:
关于总结的第四条——“宽度什么的最好还是用百分比处理;涉及到高度、字体大小之类的则用rem。” 想追问下,为什么宽度不能直接使用rem来定义呢?
这个纯属个人观点,和我工作的实际情况有关系。使用宽度使用rem度量当然是可以的,不过有时候百分比还是更好计算,也更明了直观。。假设标准的320p宽度的页面下,html{font-size:50px}的时候,元素width是25%直观还是4rem直观呢?同样,在html{font-size:50px}的情况下,是25%直观还是1.6rem比较直观呢?


本文出自 赵金添的前端博客@福州软件外包公司,转载时请注明出处及相应链接。

0
分享本文至:

发表评论

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部