CSS2 Media类型使用方法及简介（@Media）

最新推荐文章于 2024-06-01 09:39:57 发布

飞妮莫属

最新推荐文章于 2024-06-01 09:39:57 发布

阅读量797

点赞数

分类专栏： css 文章标签： css types properties fonts browser 浏览器

本文链接：https://blog.csdn.net/huanmie913/article/details/6126570

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.
Media Type可以让你的文档在不同的媒介上有不同的呈现形式，它们可以是显示器、纸张、发声浏览器等等。

Media Types
媒介类型

Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
一些CSS属性只为某些媒介所设计。飞飞Asp,技术乐园举例来说 "voice-family"属性就是为那些只能用听的用户（盲人）设计的。一些其他的属性可以使用在不同的媒介上，但可能得用不同的值（标准不一）。举例来说"font-size"属性既可在显示屏上也可以在打印媒体上使用，但或许得用不同的值。飞飞Asp技术,乐园文档一般在显示屏上需要的字体要大于纸上，sans-serif 字体在显示屏幕上容易阅读，然而纸上使用seri字体更好些。

The @media Rule
@media 规则

The @media rule allows different style rules for different media in the same style sheet.
@media规则允许在同一样式表中为不同的媒介使用不同的样式规则

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:
下面例子中的样式告诉浏览器在显示屏幕上使用14象素Verdana字体，但在打印时字体就变为10象素的Times。注意下，不管是在显示屏幕上还是在纸上字体都加粗：

以下是引用片段：

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

See it yourself ! If you are using Mozilla/Firefox or IE 5+ and print this page, you will see that the paragraph under "Media Types" will be displayed in another font, and have a smaller font size than the rest of the text.
你自己来见证一下！如果你使用了Mozilla/Firefox 或 IE 5+的浏览器并打印这张页面，你就会看见在"Media Types"下面的段落会显示成另外种字体，而且比其余的字体都小。

Different Media Types
不同的媒介类型

Note: The media type names are not case-sensitive.
注意：媒体类型名称不区分大小写

Media Type	描述
all	Used for all media type devices 可用在所有媒介设备上
aural	Used for speech and sound synthesizers[发音]
braille	Used for braille tactile feedback devices[触觉]
embossed	Used for paged braille printers[盲人专用打印机]
handheld	Used for small or handheld devices[移动]
print	Used for printers[普通打印]
projection	Used for projected presentations, like slides[幻灯片]
screen	Used for computer screens[屏幕]
tty	Used for media using a fixed-pitch character grid, like teletypes and terminals[电报]
tv	Used for television-type devices[电视]