响应式Web设计学习笔记

响应式网页设计

将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来。针对任意设备对网页内容进行完美布局的一种显示机制。

同名：流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计、弹性设计。

视口

指浏览器窗口内的内容区域，不包括工具栏、标签栏等，网页实际显示的区域。width

屏幕尺寸

设备的物理显示区域 device-width

媒体查询语法

body { background-color: grey;} @media screen and (max-width: 960px) {    body {     background-color: grey;    } }@media screen and (max-width: 768px) {     body {     background-color: orange;     }}@media screen and (max-width: 550px) {     body {     background-color: yellow;     }}@media screen and (max-width: 320px) {     body {     background-color: green;     }}