REM，你值得拥有?!
when ...
some task like..
1、PX
2、%(流式布局)
3、响应式 ( CSS3的media query )
4、rem
常见屏幕适配方式
static px
320
414
%
320
414
CSS precentage
%+
320
414
rem
320
414
| 布局 | 性质 | 缺陷 | 最佳使用场景 |
|---|---|---|---|
| px |
绝对单位 |
不能适配其他屏幕 | 固定宽带 |
| % | 相对/绝对 | border-radius font-size不能百分比 |
最外层包裹dom或比例关系 |
| em | 相对单位 | 修改一点，导致子节点联动修改 | 父子节点存在对应大小关系 |
| rem | 相对/绝对 | font-size不能为小数 | 等比缩放 |
单位 compare
before
after...
1、显示或隐藏
2、触屏与鼠标
3、弹性布局
响应式布局
Example
流式布局
页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住
Rem
font size of the root element
REM has bird use?
REM 能等比例适配所有屏幕!
Can I Use
what is font size of the root element?
基于根节点（也就是html节点）定义的相对单位
html { font-size : 16px ; } //1rem = 16px
html { font-size : 11px ; } //1rem = 11px
html { font-size : 10px ; } //1rem = 10px
media query设置font-size
JS动态设置font-size
some example
- taobao.com
- ke.qq.com
- QQ weather
- unfriendly with sprite
- less accuracy （far away the divide）
- compatible -> pc
- limit the number of text
Rem 's short
layout compare
| 布局 | 优点 | 缺点 | 开发难度 |
|---|---|---|---|
| 响应式 | 一处代码 多处运行 |
代码累赘 加载时间加长 |
兼容各种设备工作量大，效率低下 |
| 流式布局 | 开发简单 | 不能完成 等比适配 |
低 |
| rem | 适配效果最佳 | 计算问题 次精确 |
中 |
END
rem
By coverguo
