some task like..
1、PX
2、%(流式布局)
3、响应式 ( CSS3的media query )
4、rem
常见屏幕适配方式
static px
320
414
%
320
414
%+
320
414
rem
320
414
布局 | 性质 | 缺陷 | 最佳使用场景 |
---|---|---|---|
px |
绝对单位 |
不能适配其他屏幕 | 固定宽带 |
% | 相对/绝对 | border-radius font-size不能百分比 |
最外层包裹dom或比例关系 |
em | 相对单位 | 修改一点,导致子节点联动修改 | 父子节点存在对应大小关系 |
rem | 相对/绝对 | font-size不能为小数 | 等比缩放 |
页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住
font size of the root element
html { font-size : 16px ; } //1rem = 16px
html { font-size : 11px ; } //1rem = 11px
html { font-size : 10px ; } //1rem = 10px
布局 | 优点 | 缺点 | 开发难度 |
---|---|---|---|
响应式 | 一处代码 多处运行 |
代码累赘 加载时间加长 |
兼容各种设备工作量大,效率低下 |
流式布局 | 开发简单 | 不能完成 等比适配 |
低 |
rem | 适配效果最佳 | 计算问题 次精确 |
中 |