css3媒体查询定义

CSS3媒体查询是一种CSS技术，它可以让开发者针对不同的设备或屏幕大小，定义不同的CSS样式。它是响应式布局的基础。

媒体查询定义通常在CSS样式表中使用，具有以下格式：

@media mediatype and|not|only (media feature) {
  CSS rules;
}

其中，mediatype表示媒介类型，如all、print、screen等；(media feature)表示某个媒介特性，如width、height、orientation等；and、not、only表示媒体查询的条件。

比如下面的代码表示的是，只在视口宽度大于等于768px时，应用background-color为灰色的样式：

@media only screen and (min-width: 768px) {
  body {
    background-color: gray;
  }
}

这样的媒体查询可以让我们实现移动端、平板、PC等不同设备上的页面布局和样式。