css3的媒体查询怎么用

CSS3的媒体查询（Media Queries）是响应式设计的核心组成部分，它允许网页内容根据设备的特性（如屏幕尺寸、分辨率、颜色模式、方向等）动态调整布局和样式。媒体查询使用 `@media` 规则定义条件，当满足这些条件时，对应的 CSS 规则就会应用到页面上。

基本语法如下：

@media (媒体类型 and [媒体特性]) {
  /* 在此媒体条件下适用的CSS样式 */
}

例如，如果你想要为视口宽度小于600px的设备提供不同的样式，你可以这样写：

@media (max-width: 600px) {
  body {
    font-size: 14px;
    margin: 0;
  }
  .container {
    width: 100%;
  }
}

在这个例子中，当屏幕宽度小于或等于600px时，body元素的字体大小和外边距会改变，`.container`的宽度将变为100%以适应小屏幕。