白骑士的CSS进阶篇之响应式设计 3.2.1 媒体查询-CSDN博客

本文链接：https://blog.csdn.net/JeremyTC/article/details/141353527

在现代网页设计中，响应式设计（Responsive Design）是必不可少的，它确保了网页在各种设备上都能以适当的方式显示，无论是桌面电脑、平板还是手机。响应式设计的核心在于使用 CSS 媒体查询（media queries），以实现页面布局和样式的动态调整。本文将深入探讨媒体查询的使用，包括其基本语法、媒体特性与条件、以及实际应用场景。

媒体查询概述

媒体查询是 CSS3 引入的一个功能，它允许开发者根据不同的设备特性（如屏幕宽度、高度、分辨率等）应用不同的样式。这种方法使得网页能够适配各种设备，提供最佳的用户体验。媒体查询的基本思想是通过检测设备的特性来动态地调整页面样式。

语法：

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

‘media-type‘：指定媒体类型，例如 ‘screen‘、‘print‘。
‘media-feature‘：指定媒体特性，例如 ‘width‘、‘height‘、‘resolution‘。

媒体查询的基本语法

媒体查询的基本语法结构如下：

示例：

/* 针对宽度不超过600px的设备 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 针对宽度至少为600px的设备 */
@media (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

在上面的例子中：

当屏幕宽度小于或等于 600 像素时，背景颜色变为 ‘lightblue‘。
当屏幕宽度大于或等于 600 像素时，背景颜色变为 ‘lightgreen‘。

媒体特性与条件

媒体查询的核心在于媒体特性（media features），它们定义了要匹配的设备特性。常用的媒体特性包括：

设备宽度和高度

‘width‘：视口的宽度。
‘height‘：视口的高度。
‘min-width‘：视口的最小宽度。
‘max-width‘：视口的最大宽度。
‘min-height‘：视口的最小高度。
‘max-height‘：视口的最大高度。

示例：

/* 仅在视口宽度在400px到800px之间时应用 */
@media (min-width: 400px) and (max-width: 800px) {
  body {
    font-size: 16px;
  }
}

设备分辨率

‘resolution‘：屏幕的分辨率，用于控制高分辨率设备上的样式。单位通常为 ‘dpi‘（每英寸点数）或 ‘dppx‘（每像素点比）。

示例：

/* 针对分辨率大于等于 2dppx 的高分辨率设备 */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

设备方向

‘orientation‘：设备的方向，可以是 ‘portrait‘（竖屏）或 ‘landscape‘（横屏）。

示例：

/* 仅在设备方向为竖屏时应用 */
@media (orientation: portrait) {
  body {
    background-color: lightyellow;
  }
}

颜色与对比度

‘color‘：颜色深度。
‘monochrome‘：设备是否为单色显示。
‘prefers-color-scheme‘：用户首选的颜色主题，‘light‘ 或 ‘dark‘。

示例：

/* 仅在用户首选深色模式时应用 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

媒体查询的实际应用

在响应式设计中，媒体查询可以用来调整布局、字体大小、间距等，使网页在不同设备上的显示效果最佳。以下是几个实际应用的示例：

调整布局

示例：

/* 默认布局（桌面版） */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

/* 针对宽度不超过768px的设备（手机/平板） */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

效果：

当视口宽度小于或等于 768 像素时，‘.container‘ 的布局从两列变为一列。

调整字体大小

示例：

/* 默认字体大小 */
body {
  font-size: 16px;
}

/* 针对宽度不超过480px的设备 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

效果：

在较小的设备上，字体大小变为 14 像素，以适应更小的屏幕。

隐藏元素

示例：

/* 默认显示所有元素 */
.sidebar {
  display: block;
}

/* 针对宽度不超过600px的设备 */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

效果：

在屏幕宽度小于或等于 600 像素时，‘.sidebar‘ 元素将被隐藏。

响应式图片

示例：

/* 默认图片 */
img {
  max-width: 100%;
  height: auto;
}

/* 针对宽度不超过800px的设备 */
@media (max-width: 800px) {
  img {
    width: 100%;
    height: auto;
  }
}

效果：