关注我们

CSS - 媒体类型

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

当前，无涯教程有两种方法可以为样式表指定媒体依赖关系-

使用@media或@import 规则从样式表中指定目标媒体。
指定 document language 中指定目标媒体。

@media规则

@media 规则指定一组规则的目标媒体类型(以逗号分隔)，下面给出的是一个例子-

复制代码

<style tyle="text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

Document 语言

在HTML 4.0中，LINK元素上的 media 属性指定外部样式表的目标媒体-

复制代码

<style tyle="text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel="stylesheet" type="text/css" media="print, 
               handheld" href="foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

media媒体类型

为CSS媒体类型选择的名称反映了相关属性有意义的目标设备。它们让您了解媒体类型将要引用的设备。以下是各种媒体类型的列表-

Sr.No.	Value & Remark
1	all 适用于所有设备。
2	aural 适用于语音合成器。
3	braille 用于盲文触觉反馈设备。
4	embossed 适用于分页盲文打印机。
5	handheld 适用于手持设备(通常是小屏幕，单色，带宽受限)。
6	print 适用于分页，不透明的Materials以及在打印预览模式下在屏幕上查看的文档。请查阅有关分页媒体的部分。
7	projection 用于投影演示，例如投影仪或打印到透明胶片。请查阅有关分页媒体的部分。
8	screen 主要用于彩色计算机屏幕。
9	tty 适用于使用固定间距字符网格的媒体，例如电传打字机，终端或显示能力有限的便携式设备。
10	tv 用于电视类型的设备。

注意-媒体类型名称不区分大小写。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

深入浅出区块链 -〔陈浩〕

Kafka核心技术与实战 -〔胡夕〕

Netty源码剖析与实战 -〔傅健〕

Service Mesh实战 -〔马若飞〕

流程型组织15讲 -〔蒋伟良〕

手把手带你写一门编程语言 -〔宫文学〕

手把手带你搭建秒杀系统 -〔佘志东〕

朱涛 · Kotlin编程第一课 -〔朱涛〕

计算机基础实战课 -〔彭东〕

好记忆不如烂笔头。留下您的足迹吧 :)