782. 【css】常用css媒体查询

2023-09-03 本文已影响0人七镜

常用css媒体查询

在 CSS 中，媒体查询用于根据不同的屏幕尺寸设置不同的样式。可以使用媒体查询来设置移动端的样式，例如调整字体大小、元素的宽度和高度、图片的缩放比例等。

媒体查询的语法如下：

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

其中，media-type 是指定媒体类型的关键字，例如 "screen" 表示屏幕，"print" 表示打印，"speech" 表示语音朗读等。media-feature-rule 是指定媒体特征的条件，例如 "width <= 500px" 表示屏幕宽度小于 500px。

以下是一些常用的媒体查询：

@media screen and (max-width: 500px) { ... }：表示当屏幕宽度小于 500px 时，应用 CSS 规则。
@media screen and (min-width: 500px) { ... }：表示当屏幕宽度大于或等于 500px 时，应用 CSS 规则。
@media screen and (orientation: landscape) { ... }：表示当屏幕方向为横向时，应用 CSS 规则。
@media screen and (orientation: portrait) { ... }：表示当屏幕方向为纵向时，应用 CSS 规则。

以下是设置移动端字体大小的示例：

@media screen and (max-width: 500px) {
  body {
    font-size: 1.5rem;
  }
}

在上述代码中，我们使用 @media 查询来设置移动端的字体大小。当屏幕宽度小于 500px 时，body 元素的字体大小将设置为 1.5rem。

以下是设置移动端图片缩放比例的示例：

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

在上述代码中，我们使用 @media 查询来设置移动端图片的缩放比例。当屏幕宽度小于 500px 时，img 元素将尽可能保持原始宽度，高度会根据宽度自动调整。

媒体查询还可以用于设置其他样式，例如：