响应式布局

响应式

● 解析：
一个网站能够兼容多个终端

● 实现：
○ 为每个终端做一个特定版本，即同一个域名有几套完全不同的代码；
○ 根据设备环境进行相应调整，即同一套代码通过 媒体查询 实现自适应。

自适应

CSS1阶段

▶ 居中 margin: 0 auto;
▶ 浮动 float: left;
▶ 百分比 width: 33%;

CSS2阶段

媒体查询
语法 @media 媒体类型{...}
栗子 @media print { body { font-size: 10px } }
媒体类型 ▶all ▶print ▶screen ▶handheld ▶projection

CSS3阶段

媒体查询升级版
语法 @media 媒体类型 操作符 (表达式) { 媒体功能 }
栗子 @media screen and (max-width: 990px){ .container{ background: orange; } }

● 媒体类型type / 媒体功能feature

● 操作符
○ and 组合多个功能 / 组合类型&功能
○ not
○ only

● 引入
○ link ：
○ @media：@media screen and (min-width: 600px) and (max-width: 800px){...}

栅格系统grid systems

● 解析：以规则的网格阵列来布局
● 核心：浮动 + 百分比 + 媒体查询: 1 用媒体查询检测当前屏幕尺寸 => 确定相应使用方案 2 用浮动使元素脱离文档流 => 跟随相邻元素自动分布 3 用百分比控制元素大小 => 跟随屏幕统一变化尺寸
● 栗子：Demo

BootStrap

● 解析：一个基于栅格布局的前端框架
● 使用：

FLEX