tutorial/media_queries

Media Queries 是一种非常强大的 CSS 技术，它允许我们根据设备的屏幕尺寸或其他特征来应用不同的样式规则。以下是一些关于 Media Queries 的基本概念和用法。

基本用法

Media Queries 的基本语法如下：

@media media_type and (expression) {
  CSS 规则;
}

• media_type 可以是 screen、print、speech 等。
• expression 是一个条件表达式，通常用于判断设备的屏幕尺寸或其他特征。

常用特性

• 屏幕宽度：可以使用 min-width 和 max-width 来指定屏幕宽度。
• 设备方向：可以使用 orientation 属性来指定设备方向，如 portrait 或 landscape。
• 分辨率：可以使用 resolution 属性来指定设备的分辨率。

示例

以下是一个简单的 Media Queries 示例，当屏幕宽度小于 600px 时，将应用不同的样式：

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

扩展阅读

想要了解更多关于 Media Queries 的知识，可以阅读本站的 CSS 媒体查询教程。

Mobile Responsive Design