CSS媒体详解

CSS媒体查询详解

最新推荐文章于 2024-04-19 07:53:30 发布

Sunny蔬菜小柠

最新推荐文章于 2024-04-19 07:53:30 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： CSS媒体查询

本文链接：https://blog.youkuaiyun.com/qq_36595013/article/details/80946058

CSS/CSS3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS媒体查询的应用，包括如何根据不同媒体类型（如屏幕和打印）设置不同的样式。通过示例代码展示了如何使用@media规则来定义特定媒体类型的样式，以及如何在不同媒体上应用不同的样式文件。

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>

这里写图片描述

你也可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

这里写图片描述