css3 @media

CSS3 的 @media 属性是 CSS 中一个重要的特性，它允许开发者控制样式在特定的媒体类型(如移动媒体、小屏幕媒体、打印媒体等)下的表现。通过使用 @media 属性，开发者可以限制样式在特定的媒体类型下的执行，从而更精细地控制网页的样式。

下面我们将详细介绍一下 CSS3 的 @media 属性。

## @media 属性

@media 属性是一个 CSS 选择器，它指定样式在特定的媒体类型下的应用。它有三个关键字：

- @media：后面跟着一个或多个媒体类型(例如：media、screen、print)。

- media：后面跟着一个或多个关键词，这些关键词描述了要在哪些媒体类型下应用样式。

- type：后面跟着一个数字或字母，表示要应用的媒体类型。

例如，下面的样式将在小屏幕上打印时应用：

body {

font-size: 16px;

font-weight: bold;

color: #f00;

@media print {

body {

font-size: 14px;

font-weight: bold;

color: #f00;

在上面的例子中，@media print 属性指定了要在打印时应用样式。媒体类型是 print，关键词是“print”，数字表示打印时将字体大小设置为 14 像素。

除了媒体类型和关键词外，@media 属性还可以使用其他关键词来控制样式。例如，使用 @media screen 属性可以将样式应用于屏幕上的页面，使用 @media screen and (max-width: 800px) 属性可以将样式应用于最大宽度为 800 像素的屏幕上。

## 使用 @media 属性

使用 @media 属性可以更精细地控制网页的样式，但需要注意的是，使用 @media 属性也会增加代码的复杂度。因此，开发者应该根据具体情况来决定是否使用 @media 属性。

以下是一些使用 @media 属性的示例：

- 控制字体大小和颜色：使用 @media print 属性。

- 控制字体和颜色在新窗口中的表现：使用 @media screen and (max-width: 800px) 属性。

- 控制图片的显示和隐藏：使用 @media screen and (min-width: 800px) 属性。

总之，使用 @media 属性可以让开发者更精细地控制网页的样式，但也会增加代码的复杂度，开发者应该根据具体情况来决定是否使用 @media 属性。