媒体查询基础

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 65 课，共 76 课。

CSS 中的媒体查询可以根据设备的宽度、高度或其他属性应用样式，让网站适配不同的屏幕尺寸。

媒体查询的基本语法：

@media (condition) {  
    selector {  
        property: value;  
    }  
}

条件：触发样式的规则（例如，max-width: 600px）。
选择器：要设置样式的 HTML 元素。

属性：要设置的 CSS 属性（例如，width、font-size）。
值：分配给属性的值，会根据媒体查询条件而变化。

在媒体查询中，条件可以基于屏幕尺寸、分辨率等多种因素。常见的条件包括：

max-width：将样式限制为最大宽度符合条件的屏幕（例如，max-width: 600px）。
min-width：将样式应用于最小宽度符合条件的屏幕（例如，min-width: 768px）。

max-height：将样式限制为最大高度符合条件的屏幕（例如，max-height: 400px）。
min-height：将样式应用于最小高度符合条件的屏幕（例如，min-height: 500px）。

这些条件可以帮助你控制网站在不同设备和屏幕方向下的显示效果。

示例：

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

当屏幕宽度为 600px 或更小时，背景颜色会变为 lightblue。当屏幕宽度介于 601px and 1024px 之间时，背景颜色会变为 lightgreen。

挑战

简单

给你一个 HTML 文档，其中包含一个标题（<h1>）、一个段落（<p>）和一个 <div>。你的任务是添加媒体查询，让页面能够响应不同屏幕尺寸。请按以下步骤操作：

为最大宽度为 600px 的屏幕添加一个 @media 查询：
- 将 body 的背景颜色设为浅蓝色。
- 将标题（<h1>）的字体大小设为 5vw（视口宽度的 5%）。
为最小宽度为 601px 且最大宽度为 1024px 的屏幕添加一个 @media 查询：
- 将 body 的背景颜色设为浅绿色。
- 将标题（<h1>）的字体大小设为 3vw（视口宽度的 3%）。

调整浏览器窗口大小，看看媒体查询如何动态调整布局。

亲手试试

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--在这里编写你的代码-->
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>