css高级篇 (布局：静态、流式、弹性、自适应、响应式)

css发展时间线

时间	新技术
1996	css1
1998	css2
2010	css3、响应式布局
2012	媒体查询
2017	grid

固定布局&静态布局（px）

固定宽度，然后居中。缺点：随着现在屏幕大小的不同化，屏幕太大留白就很多。

流式布局（百分比、vw/vh-----vw/vh有些浏览器或低版本不兼容）

宽高使用百分比，放大缩小。缺点：字体没法百分比调整，宽度太小字体等排版会混乱。

弹性布局（em/rem、flex）

根据根元素字体大小变化，进行缩放。比如高度2rem

自适应布局

宽度变化，进行缩放，样式整体不会有啥变化。缩放之后，要刷新页面才会进行重新布局。（如手机、平板电脑、台式机等都各需要一套）针对不同设备创建一个固定布局

主要针对（320 480 760 960 1200 1600）六套。一般电商这种页面复杂的，两套就够了。

响应式布局

实时变化。宽度变化，一行可能变两行以上，样式也会发生变化。缩放的同时，直接进行换行等，很丝滑。（一套代码，配合媒体查询）
网站例子：思否，缩小之后，左侧菜单直接收成标签，再缩小，变成横着的菜单。