CSS3中的Media Queries学习笔记

什么是Media Queries

Media Queries 是 CSS3 中的一个重要特性，它允许我们根据设备的特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式。通过使用 Media Queries，我们可以为不同的设备提供不同的样式，从而实现响应式设计。

Media Queries 的语法

Media Queries 的语法非常简单，它由一个媒体类型和一个或多个媒体特性组成。媒体类型指的是设备的类型，如屏幕、打印机等，而媒体特性则指的是设备的特性，如屏幕宽度、高度、方向、分辨率等。

Media Queries 的语法如下：

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

其中，mediatype 表示媒体类型，可以是 all、screen、print 等；media feature 表示媒体特性，可以是 width、height、orientation、resolution 等；CSS rules 表示要应用的 CSS 样式。

Media Queries 的示例

下面是两个 Media Queries 的示例，分别根据屏幕宽度和设备方向来应用不同的样式。

示例一：根据屏幕宽度应用不同的样式

/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 当屏幕宽度大于 768px 时，应用以下样式 */
@media screen and (min-width: 769px) {
  body {
    font-size: 16px;
  }
}

上述代码中，使用了 max-width 和 min-width 两个媒体特性来判断屏幕宽度是否小于等于 768px，然后分别应用不同的样式。

示例二：根据设备方向应用不同的样式

/* 当设备处于横向方向时，应用以下样式 */
@media screen and (orientation: landscape) {
  body {
    background-color: #ccc;
  }
}

/* 当设备处于纵向方向时，应用以下样式 */
@media screen and (orientation: portrait) {
  body {
    background-color: #fff;
  }
}

上述代码中，使用了 orientation 媒体特性来判断设备的方向，然后分别应用不同的样式。

总结

Media Queries 是 CSS3 中的一个重要特性，它允许我们根据设备的特性来应用不同的样式，从而实现响应式设计。Media Queries 的语法非常简单，它由一个媒体类型和一个或多个媒体特性组成。在实际应用中，我们可以根据不同的需求来选择不同的媒体特性，从而实现更加灵活和精准的响应式设计。