CSS媒体详解

秒速五厘米 2022-05-21 11:59 229阅读 0赞

**CSS媒体类型**  
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

--------------------

**媒体类型**  
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 “voice-family” 属性被设计为针对听觉用户终端。其他一些属性可用于不同的媒体类型。例如，”font-size”属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。

--------------------

**@media 规则**

@media 规则允许在相同样式表为不同媒体设置不同的样式。  
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>CSS媒体查询</title>
            <style type="text/css"> h2 { text-align: center; } /*浏览器屏幕上显示一个14像素的Verdana字体样式。 但是如果页面打印，将是10个像素的Times字体。 font-weight在屏幕上和纸上设置为粗体*/ @media screen { p { font-family: verdana, sans-serif; font-size: 30px;} } @media print { p { font-family: Times, serif; font-size: 10px;} } @media screnn, print { p { font-weight: bolder;} } </style>
        </head>
    
        <body>
            <h2>CSS媒体查询</h2>
            <p>这是一些文本</p>
            <p>这是一些文本</p>
            <p>这是一些文本</p>
            <p>这是一些文本</p>
        </body>
    </html>

![这里写图片描述][70]  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]  
![这里写图片描述][70 3]  
你也可以在不同的媒体上使用不同的样式文件：

![这里写图片描述][70 4]

[70]: /images/20220521/cc55117dcdf548c1b7eb52c1780fe3c4.png
[70 1]: /images/20220521/28fe731b0f164629aa6b5a2eab98da1a.png
[70 2]: /images/20220521/b41385daa7824711b3f7ac1ce8b5e859.png
[70 3]: /images/20220521/e600ef3f00614215be6b99d06ab7db02.png
[70 4]: /images/20220521/368c4a33d7ef48a4ad788f70909b14d2.png