Module 02 · Web Design Methodologies网页设计方法论

Working with Media Queries使用媒体查询

观看本视频后，你将能够：

媒体查询（Media Queries）简介

随着设备屏幕尺寸的多样化，网站必须能够适应各种屏幕尺寸。
在某些情况下，可能需要对布局进行重大调整，以适配特定的屏幕大小。这时，媒体查询（Media Queries） 就派上用场了！

🔹 媒体查询的作用：

📌 最常见的应用： 响应式设计（Responsive Design）

媒体查询与 CSS 结合使用，改变了现代响应式 Web 应用的开发方式。

💡 示例：

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

📌 这条媒体查询规则 会在屏幕宽度 ≤ 600px 时，改变网页背景颜色。

媒体类型用于定义设备的类别。其中，最常见的是 screen，但还有其他类型：

📌 多个媒体类型可以组合使用：

@media screen, print {
  body {
    font-size: 14px;
  }
}

📌 作用： 无论是屏幕还是打印设备，网页文本大小均设为 14px。

媒体查询可以查询设备的各种显示属性，这些属性被称为 媒体特性（Media Features）。
它们使网页能够根据不同屏幕尺寸定义样式规则，从而实现更好的适配性。

🎯 媒体特性	📌 作用
width	确定屏幕的宽度（单位：px）
height	确定屏幕的高度（单位：px）
orientation	判断屏幕方向（`portrait` 竖屏 / `landscape` 横屏）
resolution	确定屏幕分辨率
pointer	判断设备的指针类型（如 `fine` 表示鼠标，`coarse` 表示触摸屏）
hover	检测设备是否支持鼠标悬停

📌 示例：根据屏幕方向调整样式

@media (orientation: portrait) {
  body {
    background-color: lightgray;
  }
}

📌 作用： 当设备处于竖屏模式时，网页背景变成浅灰色。

视口 Meta 标签用于调整移动浏览器的视口大小，使网页在移动端显示更优化。
📌 示例

<meta name="viewport" content="width=device-width, initial-scale=1">

🔹 作用：

由于市面上的设备种类繁多，很难预判用户的具体设备。
但通过 CSS 媒体查询的新特性，可以测试不同设备的功能：

📌 示例：针对支持悬停的设备应用样式

@media (hover: hover) {
  button {
    background-color: blue;
  }
}

📌 作用： 如果设备支持鼠标悬停，按钮背景颜色变为蓝色。

断点是指 屏幕尺寸达到某个阈值时，页面布局需要调整的点。

💡 不同设备的常见断点：

📌 示例：针对移动设备优化布局

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

📌 作用： 当屏幕 ≤ 480px（移动端）时，文本大小调整为 12px。

本视频中，你学习了：