CSS的媒体类型有哪些？

一、基本媒体类型

1. all

all是默认的媒体类型，适用于所有的设备和媒体类型。如果我们不指定媒体类型，那么CSS样式就会默认应用于所有的媒体类型。

    <link rel="stylesheet" type="text/css" href="style.css" media="all" />

2. print

print会应用于打印机和 PDF 文件。如果我们需要针对打印页面进行特殊的样式调整，就可以使用 print 媒体查询来设置打印样式，并避免了打印时页面排版混乱的问题。

    <link rel="stylesheet" type="text/css" href="print.css" media="print" />

3. screen

screen 是应用于计算机屏幕和媒体播放器的媒体类型。如果我们只想在计算机屏幕上展示样式，可以使用 screen。这是默认的媒体类型，如果我们不指定媒体类型，那么CSS样式就会默认应用于 screen 媒体类型。

    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

4. speech

speech 是应用于屏幕阅读器的媒体类型。如果我们需要优化页面内容，以便于屏幕阅读器可以更好地读取页面内容，就可以使用 speech 媒体类型来设置屏幕阅读器样式。

    <link rel="stylesheet" type="text/css" href="speech.css" media="speech" />

二、常见的媒体查询

1. max-width

max-width 是设置CSS样式最大宽度的媒体查询。通过 max-width 媒体查询设置，可以根据设备的宽度来适配页面的样式。在移动设备的页面设计中，经常使用 max-width 媒体查询适配不同的设备屏幕宽度。

    @media screen and (max-width: 768px) {
        body {
            background-color: #f2f2f2;
        }
    }

2. min-width

min-width 是设置CSS样式最小宽度的媒体查询。通过 min-width 媒体查询设置，可以根据设备的宽度来适配页面的样式。min-width 媒体查询与 max-width 媒体查询不同的是，它是针对页面最小宽度而设计的。

    @media screen and (min-width: 768px) {
        body {
            background-color: #f2f2f2;
        }
    }

3. orientation

orientation 是设置设备方向的媒体查询。通过 orientation 媒体查询设置，可以根据设备的横向或纵向方向来适配页面的样式。这对于平板和手机等移动设备非常有用。

    @media screen and (orientation: landscape) {
        body {
            font-size: 1.2rem;
        }
    }

4. resolution

resolution 是设置屏幕分辨率的媒体查询。通过 resolution 媒体查询设置，可以根据设备的屏幕分辨率来适配页面的样式。这对于高分辨率设备的页面优化非常有用。

    @media screen and (min-resolution: 300dpi) {
        body {
            font-size: 1.3rem;
        }
    }

三、总结