【学习】webApp里 rem的用法
2015-12-17 13:09
603 查看
写在前面
说到webAPP,我们首先要解决的就是“响应式”这个适配的问题。目前主流的技术是利用css3的viewpoint+媒体查询+栅格布局来实现。这方面有很多成熟的框架:bootstrap、amazeUI等可以使用。不过本人很讨厌把别人的东西直接拿来用,为了实现一个简单的功能就引一个几万行的类库进来,所以当初接触移动开发前我花了2周时间去探索bootstrap的源码,把bootstrap的css组件和js组件研究一番,整合到自己的知识体系里去。当然这些都是题外话,今天我们的主角 是rem。
抛砖
我做的webAPP项目仅仅是针对手机用户,所以在响应式这一块没有使用栅格布局。具体的方法是 设置viewport之后 在body层下面定义 wrap层作为页面内容的容器,每个页面是一个ui-page,通过js控制显示隐藏的形式来切换。在布局方面除了 细节元素的尺寸和边距采用px单位,其他定位都采用百分比,根据屏幕的尺寸来自适应。
是的,这样做略微有点粗糙,所以针对某些细节,我定义了3个媒体查询,分别是iPhone5s、iPhone6、iPhone6 plus的屏幕宽度,针对这些页面里单独覆盖哪些仅仅靠百分比无法做到精细的样式。
这样做当然能满足我这个项目的需求,但暮然回首缺发现css代码实在是有点长了,看得我不太舒服,所以有没有更好地办法来解决 适配 的问题?
引玉
在css3出来之前,大家可能知道em单位。这个”em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体
font-size,这完全可以根据您自己的需,大家也可以参考下图:
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。
浏览器兼容性
反正针对webAPP来说,兼容性这个问题基本可以忽略不计了,因为Android 浏览器和iPhone的 Safari都是用webkit内核的,但还是提一下:相关文章推荐
- 如何判断一个app是原生app还是 webapp,或者是混合app
- webapp运行环境配置
- 【实践】用路由为webApp单页应用提供多入口
- mui开发webapp(2)
- mui开发webapp(1)
- WebApp按钮样式css实例
- [原] VS新添加WebApplication项目,无法运行,请求帮助,问题如何解决
- WebApplication和WebSite的区别
- 在quartz的Job中获得Spring的WebApplicationContext或ServletContext
- WebApp中input限制金额输入
- Cordova 用iOS做webApp壳
- ionic 隐藏ion-tabs 并解决延迟问题 (tabs)
- 跟着岐哥学WebApp(一)
- Html5做App(webapp)中界面适配的问题总结
- 关于webapp中的文字单位的一些捣腾
- webapp之meta
- webapp图片懒加载实现
- Eclipse+Maven命令创建webapp项目<三>
- Eclipse+Maven创建webapp项目<一>
- Eclipse+Maven创建webapp项目<二>