CSS 媒体类型

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

媒体类型

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

你可以自己尝试看看 ! 如果您使用的是Mozilla / Firefox或IE5+打印此页，你会看到，"Media Types"将使用另一种比其他文本字体大小小点的字体显示。

其他媒体类型

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

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

CSS 媒体类型 总结的更多相关文章

  1. CSS 媒体类型

    CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 一.媒体类型 一些CSS属性只设计了某些媒体.例如"voice ...

  2. CSS：CSS 媒体类型

    ylbtech-CSS:CSS 媒体类型 1.返回顶部 1. CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体类型 ...

  3. css媒体类型

    all 用于所有的媒体设备. aural 用于语音和音频合成器. braille 用于盲人用点字法触觉回馈设备. embossed 用于分页的盲人用点字法打印机. handheld 用于小的手持的设备 ...

  4. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  5. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  6. 样式link属性media用法--媒体类型查询

    引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...

  7. Media Queries——媒体类型

    媒体类型(Media Type)在CSS2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式. 在CSS2中常碰到的就是all(全部).screen(屏幕).pri ...

  8. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  9. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

随机推荐

  1. [BZOJ2342] [Shoi2011]双倍回文（manacher）

    传送门 manacher...... 先跑一边manacher是必须的 然后枚举双倍回文串的对称轴x 把这个双倍回文串分成4段,w wR w wR 发现,只有当 y <= x + p[x] / ...

  2. BZOJ1922 [Sdoi2010]大陆争霸 【最短路】

    题目 在一个遥远的世界里有两个国家:位于大陆西端的杰森国和位于大陆东端的 克里斯国.两个国家的人民分别信仰两个对立的神:杰森国信仰象征黑暗和毁灭 的神曾·布拉泽,而克里斯国信仰象征光明和永恒的神斯普林 ...

  3. Wing IDE 6.0 算号器注册机代码

    我开发Python时喜欢用Wing IDE, 然后最近发现Wing IDE升级到6.0版本了, 但是之前能在5.1上用的算号器代码不能用在6.0上了, 所以就上网搜搜是否有相关算号器, 果然, 找到了 ...

  4. 转载：shell中awk printf的用法

    转载:http://www.linuxawk.com/jiaocheng/83.html 6. printf函数   打印输出时,可能需要指定字段间的空格数,从而把列排整齐.在print函数中使用制表 ...

  5. Lucene 6.5.0 入门Demo

    Lucene 6.5.0 要求jdk 1.8 1.目录结构: 2.数据库环境: private int id; private String name; private float price; pr ...

  6. go--time包

    格式化字符串 转 时间戳 ////获取本地location toBeCharge := "2015-01-01 00:00:00" //待转化为时间戳的字符串 注意 这里的小时和分 ...

  7. ELK之收集Nginx、Tomcat的json格式日志

    1.安装Nginx yum -y install nginx vim /etc/nginx/nginx.conf # 修改日志格式为json格式,并创建一个nginxweb的网站目录 log_form ...

  8. Linux下使用vi新建文件保存文件时遇到错误：E212: Can't open file for writing

    出现E212: Can't open file for writing的问题是由于权限问题导致的,解决方法有以下思路: 1.使用root进行登录,然后再操作. 2.在使用命令时,前面加sudo. 3. ...

  9. PostgreSQL SystemTap on Linux

    http://digoal126.wap.blog.163.com/w2/blogDetail.do;jsessionid=3949B03DE151DA0E55D807466C5E630B.yqblo ...

  10. 使用uilabel重新自调整高度后显示横线和竖线问题

    这个使用uilabel自调节高度发现的问题,代码如下: //content label                        NSString *contentValue = ((Messag ...