css --- 前端布局 layout

2019-05-26 09:48 *奋斗* 阅读(374) 评论(0) 编辑收藏举报

1、静态布局

所有元素一律使用 px 作单位

优点：这种布局方式最简单，亦没有兼容性问题；

缺点：不能根据用户的屏幕尺寸做出不同的表现，体验较差。

2、自适应布局

创建多个静态布局，或使用百分比，每个静态布局对应一个屏幕分辨率范围

优点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。使用 @media 媒体查询；

3、流式布局（百分比布局）

页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。

优点：使用百分比定义宽度，高度大都是用px来固定住，能够灵活去适配各类分辨率，移动端常用；

缺点：如果屏幕太大或者太小都会导致元素无法正常显示。

4、响应式布局

可以把“响应式布局”看作是“流式布局”和“自适应布局”设计理念的融合。响应式几乎已经成为优秀页面布局的标准。

媒体查询+流式布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统；

优点：适应pc和移动端，如果足够耐心，效果完美；

不足：要匹配足够多的屏幕大小，工作量不小。而且媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高；

5、弹性布局（rem / em 布局 --- 移动端常用）

优点：

(1)适应性强，在做不同屏幕分辨率的界面时非常实用；

(2)可以随意按照宽度、比例划分元素的宽高；

(3)可以轻松改变元素的显示顺序；

(4)弹性布局实现快捷，易维护；

css 布局有其它说法：表格布局、float 布局、flex 布局、rem 布局等。

手机端常用12种布局（一般给设计师看的，如同桌面版的三栏布局、四栏布局等）：

https://www.xuanfengge.com/12-kinds-of-commonly-used-in-mobile-interface-design-layout.html