CSS Media 媒体类型

前言

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

  • 一些 CSS 属性只设计了某些媒体。

    • 例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。
    • 例如 font-size 属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans-serif 字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读。
属性 描述 CSS 备注 🔗
all 用于所有的媒体设备
aural 用于语音和音频合成器
braille 用于盲人用点字法触觉回馈设备
embossed 用于分页的盲人用点字法打印机
handheld 用于小的手持的设备
print 用于打印机
projection 用于方案展示,比如幻灯片
screen 用于电脑显示器
tty 用于使用固定密度字母栅格的媒体,比如电传打字机和终端
tv 用于电视机类型的设备
  • 注意:媒体类型名称不区分大小写。

1、@media 规则

  • @media 规则允许在相同样式表为不同媒体设置不同的样式。

  • 在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印,将是 10 个像素的 Times 字体。请注意,font-weight 在屏幕上和纸上设置为粗体。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <style>
    @media screen {
    p.test {
    font-family: verdana, sans-serif;
    font-size: 14px;
    }
    }

    @media print {
    p.test {
    font-family: times, serif;
    font-size: 10px;
    }
    }

    @media screen, print {
    p.test {
    font-weight: bold;
    }
    }
    </style>
    1
    <p class="test">Qian Chia 工作室</p>
  • 效果

    Qian Chia 工作室

2、响应式媒体 实例

  • 使用 CSS3 的媒体查询来创建响应式图片廊。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <style>
    div.img {
    border: 1px solid #ccc;
    }

    div.img:hover {
    border: 1px solid #777;
    }

    div.img img {
    width: 100%;
    height: auto;
    }

    div.desc {
    padding: 15px;
    text-align: center;
    }

    * {
    box-sizing: border-box;
    }

    .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
    }

    /* @media 规则 */

    @media only screen and (max-width: 700px) {
    .responsive {
    width: 49.99999%;
    margin: 6px 0;
    }
    }

    @media only screen and (max-width: 500px) {
    .responsive {
    width: 100%;
    }
    }

    .clearfix:after {
    content: "";
    display: table;
    clear: both;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo10.png">
    <img src="https://demo.qianchia.com/media/image/demo10.png" alt="图片文本描述" width="300" height="200" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo11.png">
    <img src="https://demo.qianchia.com/media/image/demo11.png" alt="图片文本描述" width="600" height="400" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo12.png">
    <img src="https://demo.qianchia.com/media/image/demo12.png" alt="图片文本描述" width="600" height="400" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="responsive">
    <div class="img">
    <a target="_blank" href="https://demo.qianchia.com/media/image/demo13.png">
    <img src="https://demo.qianchia.com/media/image/demo13.png" alt="图片文本描述" width="600" height="400" />
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
    </div>

    <div class="clearfix"></div>
  • 效果





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述





    图片文本描述

    这里添加图片文本描述



  • 重置浏览器大小查看效果。

文章目录
  1. 1. 前言
  2. 2. 1、@media 规则
  3. 3. 2、响应式媒体 实例
隐藏目录