媒体查询 media

媒体查询（Media Query）是CSS3新增的模块，它允许我们在CSS中根据设备特性和参数对样式进行控制，以适应不同的屏幕尺寸、分辨率、设备类型等等。通过媒体查询，我们可以为不同的设备或场景定义不同的CSS规则，从而实现响应式布局和设计。

媒体查询的语法格式如下：

@media mediatype and (mediafeature) {
   CSS规则；
}

其中，`mediatype` 表示媒体类型，比如 `screen`、`print`、`speech` 等，表示显示器屏幕、打印机、语音合成器等不同的输出设备。而 `mediafeature` 则表示媒体特性，比如屏幕宽度、高度、像素密度等等参数，用于判断设备的具体特征。

例如，下面的代码表示在屏幕宽度小于等于 768 像素时，使用新的样式规则：

@media screen and (max-width: 768px) {
  /* 样式规则 */
}

这样，在移动设备上访问该页面时，就可以自动应用这些针对小屏幕的样式规则，以适应不同的设备尺寸和分辨率。

相关问题

媒体查询media及案例

媒体查询（Media Queries）是CSS3新增的一个模块，它允许开发者根据设备的特性（如屏幕尺寸、分辨率、设备方向等）来自适应地调整页面的样式。媒体查询通常用于响应式设计，以提供在不同设备上获得最佳用户体验的布局和样式。

媒体查询语法如下：

@media mediatype and (expressions) {
  /* 在这里写 CSS 规则 */
}

其中，mediatype 指的是媒体类型，如 all（所有设备）、screen（屏幕设备）、print（打印设备）等；expressions 是一个或多个条件表达式，用于指定设备的特性。

以下是一些媒体查询的案例：

1. 隐藏小屏幕下的导航栏

@media screen and (max-width: 768px) {
  .navbar {
    display: none;
  }
}

2. 调整字体大小以适应不同屏幕

@media screen and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

3. 调整图片大小以适应不同屏幕

@media screen and (max-width: 768px) {
  img {
    width: 100%;
  }
}

4. 调整布局以适应横竖屏切换

@media screen and (orientation: portrait) {
  /* 竖屏样式 */
}

@media screen and (orientation: landscape) {
  /* 横屏样式 */
}

以上是一些媒体查询的案例，开发者可以根据实际需求灵活运用媒体查询来为不同的设备提供最佳的用户体验。

@media 媒体查询

@media是CSS3中的一个重要特性，它可以根据不同的设备或者不同的屏幕尺寸来设置不同的CSS样式，实现页面在不同设备上的适配。媒体查询通过检查设备的特性（如屏幕宽度、高度、设备方向、分辨率等）来确定当前使用的设备类型，并根据不同的条件应用不同的CSS样式。

媒体查询语法格式为：

@media mediatype and (condition) {
    CSS样式代码
}

其中，mediatype可以是all、screen、print等，condition是媒体查询条件，可以是屏幕宽度、高度、方向、分辨率等。

例如，下面的代码表示在屏幕宽度小于等于600px时应用的样式：

@media screen and (max-width: 600px) {
    body {
        background-color: #f00;
    }
}