CSS3 @media的基本用法总结

CSS3 @media是一种CSS3的新特性，它可以根据不同的设备或屏幕尺寸应用不同的CSS样式。本攻略将详细讲解CSS3 @media的基本用法，包括语法、常用媒体查询和示例说明。

1. 语法

CSS3 @media的语法如下：

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

其中，mediatype表示媒体类型，可以是all、print、screen等；and、not、only是逻辑运算符，用于组合多个媒体查询；media feature表示媒体特性，例如width、height、orientation等。

2. 常用媒体查询

CSS3 @media支持多种媒体查询，常用的媒体查询包括：

width：屏幕宽度。
height：屏幕高度。
orientation：屏幕方向，可以是portrait（纵向）或landscape（横向）。
aspect-ratio：屏幕宽高比。
device-width：设备宽度。
device-height：设备高度。
device-aspect-ratio：设备宽高比。
color：颜色位数。
resolution：屏幕分辨率。

3. 示例说明

3.1 示例一

下面是一个示例，演示了如何使用CSS3 @media根据屏幕宽度应用不同的CSS样式。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <style>
    /* 默认样式 */
    body {
      background-color: white;
      color: black;
    }

    /* 在屏幕宽度小于600px时应用的样式 */
    @media (max-width: 600px) {
      body {
        background-color: black;
        color: white;
      }
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

上述代码中，设置了默认样式和在屏幕宽度小于600px时应用的样式。当屏幕宽度小于600px时，可以看到背景色变为黑色，文字颜色变为白色。

3.2 示例二

下面是另一个示例，演示了如何使用CSS3 @media根据屏幕方向应用不同的CSS样式。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <style>
    /* 默认样式 */
    body {
      background-color: white;
      color: black;
    }

    /* 在屏幕方向为横向时应用的样式 */
    @media (orientation: landscape) {
      body {
        background-color: black;
        color: white;
      }
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

上述代码中，设置了默认样式和在屏幕方向为横向时应用的样式。当屏幕方向为横向时，可以看到背景色变为黑色，文字颜色变为白色。

总结

CSS3 @media是一种CSS3的新特性，它可以根据不同的设备或屏幕尺寸应用不同的CSS样式。在使用CSS3 @media时，需要了解其语法和常用媒体查询，并根据实际需求设置不同的CSS样式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3 @media的基本用法总结 - Python技术站

CSS3 @media的基本用法总结

CSS3 @media的基本用法总结

1. 语法

2. 常用媒体查询

3. 示例说明

3.1 示例一

3.2 示例二

总结

相关文章