响应式网页设计
将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来。针对任意设备对网页内容进行完美布局的一种显示机制。
同名:流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计、弹性设计。
视口
指浏览器窗口内的内容区域,不包括工具栏、标签栏等,网页实际显示的区域。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;
}
}