使用 CSS 媒体查询实现响应式布局：根据屏幕尺寸动态修改样式-html教程-PHP中文网

使用 CSS 媒体查询实现响应式布局：根据屏幕尺寸动态修改样式

聖光之護

发布： 2025-08-24 22:14:01

原创

591人浏览过

使用 css 媒体查询实现响应式布局：根据屏幕尺寸动态修改样式

本教程旨在帮助开发者利用 CSS 媒体查询，根据不同的屏幕尺寸应用不同的样式规则，从而实现响应式布局。我们将介绍媒体查询的基本语法和常用特性，并通过示例代码演示如何在网页中根据屏幕宽度动态修改元素的 CSS 属性，从而创建适应各种设备的网页。

媒体查询简介

媒体查询是 CSS3 中引入的一项强大功能，允许开发者针对不同的媒体类型和媒体特性应用不同的样式。它使得我们可以根据设备的屏幕尺寸、分辨率、方向等条件，为网页提供定制化的视觉呈现，从而实现响应式设计。

媒体查询的核心在于 @media 规则，它允许我们定义一组 CSS 规则，只有当指定的媒体条件满足时，这些规则才会被应用。

媒体查询语法

@media 规则的基本语法如下：

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

media-type: 指定媒体类型，例如 screen（屏幕）、print（打印）、speech（语音）等。
media-feature: 指定媒体特性，例如 width（屏幕宽度）、height（屏幕高度）、orientation（屏幕方向）等。
CSS rules: 当媒体条件满足时，应用的 CSS 规则。

多个媒体特性可以使用 and、or 或 , 运算符组合在一起。

常用媒体特性

以下是一些常用的媒体特性：

图改改

在线修改图片文字

455

查看详情

width: 视口的宽度。
height: 视口的高度。
device-width: 设备的屏幕宽度。
device-height: 设备的屏幕高度。
orientation: 屏幕的方向，可以是 portrait（纵向）或 landscape（横向）。
resolution: 设备的屏幕分辨率。

示例：根据屏幕宽度修改背景颜色

以下示例演示了如何使用媒体查询根据屏幕宽度修改 body 元素的背景颜色：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<h1>The @media Rule</h1>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "light blue", otherwise it is "yellow".</p>

</body>
</html>

登录后复制

在这个例子中，当屏幕宽度小于或等于 600 像素时，body 元素的背景颜色会变为 lightblue；否则，背景颜色为 yellow。

示例：动态修改 Footer 样式

假设我们需要在屏幕宽度小于 765px 时，将 id 为 logon-footer 的元素的第一个子元素的 position 属性设置为 static。可以使用以下 CSS 实现：

@media screen and (max-width: 765px) {
  #logon-footer > *:first-child {
    position: static;
  }
}

登录后复制

注意： > 选择器用于选择 logon-footer 的直接子元素。 :first-child 选择器用于选择第一个子元素。

注意事项

viewport meta 标签： 在 HTML 文档的 <head> 部分添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 标签，可以确保网页在移动设备上正确缩放。
从小到大： 建议从小屏幕到大屏幕的顺序编写媒体查询，这样可以更容易地覆盖默认样式。
避免过度使用： 不要过度使用媒体查询，尽量使用相对单位（如百分比、em、rem）来适应不同的屏幕尺寸。
测试： 在不同的设备和浏览器上测试你的网页，以确保响应式布局正常工作。