HTML&CSS_媒介类型(Media Types)

转载 2016年08月30日 15:32:00

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

媒介类型

某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如,"font-size" 属性可被用于显示器以及印刷媒介,但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号,同时,在显示器上,sans-serif 字体更易阅读,而在纸媒介上,serif 字体更易阅读。

@media规则

@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印,将使用 10 个像素的 Times 字体。注意:font-weight 被设置为粗体,不论显示器还是纸媒介:

<html>
<head>

<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>

</head>

<body>....</body>

</html>

不同的媒介类型

注释:媒介类型名称对大小写不敏感。

媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示,比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
tv 用于电视机类型的设备

转载自 W3C

相关文章推荐

浅谈CSS响应式布局——media query(媒介查询)

① 使用 @media 查询可以针对不同的媒体类型定义不同的样式。 ② @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果需要设置设计响应式的页面。 ③ 重置浏览器大小的过程中,页面也会根...

实践 HTML5 的 CSS3 Media Queries

先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 ...

CSS3 媒介查询

一、 响应式设计响应式设计,设计可根据所显示的设备屏幕大小(视口宽度)而自动调节改变, 在不同的设备上呈现的会有所不同。按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果。例如,如果网站布局上有...

Enterprise REST = Customize, Invent and Standardize Media Types

关于REST, 经常容易引起困惑的一个问题是:在 Machine-to-machine 的 REST 应用中, 客户端怎么可能在没有任何预先知识的情况下就能跟随服务器端返回的超文本来自适应的将应用程序...

DirectShow - About Media Types

因为DirectShow是组件式的,它需要在filter graph各个filter之间统一数据格式。比如,播放AVI文件,数据传入graph就是视频流,它们被转换为视频和音频流。视频流由压缩的视频帧...

MIME类型,mime-types

  • 2010-05-28 11:59
  • 17KB
  • 下载

CSS2 Media类型使用方法及简介(@Media)

Media Types allow you to specify how documents will be presented in different media. The document ca...

在CSS中,html中的标签元素三种不同的类型

在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有: 、、...、、、、...

html css cursor类型(转)

原文地址:css cursor类型" href="http://blog.sina.com.cn/s/blog_675d13c20100jdds.html" target="_blank">html ...

HTML+CSS中如何判断浏览器类型

很多时候都本浏览器兼容性的问题搞的头疼,这个理有个比较好的浏览器提示!可以判断你的浏览器是什么浏览器!很给力!大家可以试试。。。有更好的方法可以给我留言撒,交流交流! 在编写网页代码时,各种浏览...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)