设为首页
收藏本站
最新电影
> 子栏目 Asp | Jsp | XML | XSL | Div+Css | 自定义函数 | 数据库 | 脚本特效
您现在的位置: 首页=>后台技术=>div+css 订阅本栏目  
CSS2 Media类型使用方法及简介(@Media)
时间: 2011-01-10 11:58:30 阅读次数:4981


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可以让你的文档在不同的媒介上有不同的呈现形式,它们可以是显示器、纸张、发声浏览器等等飞飞A@sp技术乐园


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"属性既可在显示屏上也可以在打印媒体上使用,但或许得用不同的值文档一般在显示屏上需要的字体要大于纸上,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"下面的段落会显示成另外种字体,而且比其余的字体都小飞,飞Asp技术乐园


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[电视]



站内搜索    

下一篇精选15个国外最流行的CSS框架

上一篇多点调用的 选项卡

本栏目最新 栏目最新列表
微软IE调试工具:SuperPreview for IE(ie6
精选15个国外最流行的CSS框架
CSS2 Media类型使用方法及简介(@Media)
浏览器排版/布局 图片下方出现空隙的问题
使用IE浏览器a链接失效(不能点击)的解决方
网站优化策划 栏目最新列表
增加网站外链的快速方法
网站上线前必做的30个检查
新的友情链接参考标准(没有google的PR情况
优化Google的AdSense广告的五个工具
王通讲SEO八大基础
站点最新 站点最新列表
微博推广的一些技巧
xhEditor v1.1.7 发布,
收集的一些轻量级非常实
50个新鲜兼容最新版本的
javascript中cookie的设
Excel中出现#VALUE!、#D
jquery插件:飞飞表情插件
十个使用HTML5开发的精彩
支持HTML5的浏览器有哪些
飞妮莫属:漫画:如何写出
历史最热10条信息  
MIME介绍 及 [1] [2] [3]
巧用Google和迅雷来下载
VIA Rhine II Fast Ethe
Transact SQL 常 [1] [2]
电脑常用端 [1] [2] [3]
十道羊皮卷 欣赏+mp3版+
Do you get a kick out
每日一句:A friend and
每日一句:Theres no tu
网站开发常用手册
 width= 
伟哥博客 西安房产 123最新电影 三四六四