CSS教程：媒体类别语法

什么是媒体类别

媒体类别（Media Queries）就是一种用于查询设备特征和状态的CSS语法。通过媒体类别，我们能够针对不同的设备屏幕大小、分辨率、浏览器类型等等，为网站提供不同的CSS样式，使网站在不同设备上拥有更好的用户体验。

如何使用媒体类别

使用媒体类别，需要将CSS规则套用在一个@media规则块中。一个@media规则块由@media关键字、打括号以及媒体查询体（Media Query）组成。

示例代码：

@media screen and (max-width: 768px) {
    /* CSS规则 */
}

在上述代码中，@media规则块的媒体查询体为“screen and (max-width: 768px)”。其中，screen代表设备类型为屏幕，max-width: 768px表示设备屏幕宽度小于等于768像素。

常用的媒体类别

媒体类别的语法非常丰富，其中，最常用的几个媒体类别如下：

1. screen

screen表示设备类型为屏幕。在大部分情况下，我们都是基于screen来设定网站的样式。

@media screen {
    /* CSS规则 */
}

2. print

print表示设备是用来打印的。在这种媒体类型下，我们会通过CSS规则设置网页在打印时的样式。

@media print {
    /* CSS规则 */
}

3. (min-width: 768px)

表示设备屏幕宽度大于或等于768像素。

@media (min-width: 768px) {
    /* CSS规则 */
}

4. (max-width: 768px)

表示设备屏幕宽度小于或等于768像素。

@media (max-width: 768px) {
    /* CSS规则 */
}

案例说明

1. 针对移动设备屏幕设置字体大小

在移动设备上，由于屏幕尺寸较小，需要将网站中的文字大小设置为较小的值。我们可以像下面这样编写CSS规则：

@media screen and (max-width: 640px) {
    body {
        font-size: 14px;
    }
}

上述规则表示，当设备类型为屏幕，且屏幕宽度小于等于640像素时，将body元素的字体大小设置为14像素。

2. 针对打印设备设置打印样式

在打印设备上，为了保证打印出来的网页内容排版整齐，我们需要将网站中的一些元素隐藏或改变样式。我们可以像下面这样编写CSS规则：

@media print {
    .navbar, .sidebar {
        display: none;
    }

    .content {
        width: 100%;
    }
}

上述规则表示，当设备类型为打印设备时，将导航栏与侧边栏元素隐藏，并将内容区域元素宽度设置为100%。这样在打印时，就能保证内容不会因为显示过宽而被截断。