前端css-媒体查询@media以及常见使用例子

最新推荐文章于 2025-03-21 19:52:54 发布

大嘴史努比

最新推荐文章于 2025-03-21 19:52:54 发布

阅读量3k

点赞数 26

文章标签：前端 css 媒体

本文链接：https://blog.youkuaiyun.com/qq_42371932/article/details/142941151

版权

媒体查询（`@media`）介绍

媒体查询（@media）是 CSS 中用来针对不同的设备特性（如屏幕尺寸、分辨率等）应用不同样式的一种技术。通过媒体查询，可以使页面在不同设备上呈现不同的布局，实现响应式设计。

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

media-type：表示媒体类型，常见的媒体类型有：

all：适用于所有设备（默认）
screen：适用于屏幕设备
print：适用于打印设备

media-feature：表示媒体特性，比如设备的宽度、高度、分辨率等。常见的媒体特性有：

min-width：设备屏幕的最小宽度
max-width：设备屏幕的最大宽度
orientation：设备的屏幕方向（横向 landscape 或纵向 portrait）

媒体查询中的逻辑运算符

and：用于组合多个条件，所有条件都满足时才会应用样式。
,（逗号）：相当于 "或" 操作，任意一个条件满足时应用样式。
not：取反，应用在不符合某个条件的设备上。

常见例子

1. 基本的宽度媒体查询

针对不同屏幕宽度应用不同样式。一般用于响应式布局，根据设备的屏幕宽度调整布局和样式。

/* 当屏幕宽度小于等于600px时应用此样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度大于600px时应用此样式 */
@media screen and (min-width: 601px) {
  body {
    background-color: lightgreen;
  }
}

2. 响应式布局中常用的断点

针对不同设备屏幕宽度使用断点来调整布局。

/* 手机 */
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* 平板设备 */
@media screen and (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 桌面设备 */
@media screen and (min-width: 769px) {
  body {
    font-size: 18px;
  }
}

3. 针对屏幕方向的媒体查询

orientation 可以判断设备是横屏还是竖屏。

/* 设备为横屏模式时应用此样式 */
@media screen and (orientation: landscape) {
  body {
    background-color: orange;
  }
}

/* 设备为竖屏模式时应用此样式 */
@media screen and (orientation: portrait) {
  body {
    background-color: yellow;
  }
}

4. 针对高分辨率屏幕（如 Retina 屏幕）的媒体查询

min-resolution 或 min-device-pixel-ratio 可以检测设备的像素密度。

/* 针对高分辨率屏幕 */
@media screen and (min-resolution: 2dppx) {
  img {
    width: 50%;
  }
}

/* 或者使用 device-pixel-ratio */
@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-device-pixel-ratio: 2) {
  img {
    width: 50%;
  }
}

5. 使用 `not` 排除某些条件

not 可以用于排除某些特定条件。

/* 应用在非屏幕设备上 */
@media not screen {
  body {
    background-color: gray;
  }
}

6. 多条件查询

组合多个条件，只有当两个条件同时满足时，才会应用样式。

/* 当屏幕宽度在600px和1200px之间，且是横屏模式时应用此样式 */
@media screen and (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {
  body {
    background-color: pink;
  }
}