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. 【bzoj1483】[HNOI2009]梦幻布丁 set

    [bzoj1483][HNOI2009]梦幻布丁 Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2 ...

  2. Spoj-ANTP Mr. Ant & His Problem

    Mr. Ant has 3 boxes and the infinite number of marbles. Now he wants to know the number of ways he c ...

  3. ES6的一些说明

    一 ES6 即 ECMAScript6 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可 ...

  4. P3102 [USACO14FEB]秘密代码Secret Code

    题目描述 Farmer John has secret message that he wants to hide from his cows; the message is a string of ...

  5. Requests模拟登陆

    requests模拟登陆知乎网站 实例 # -*- coding: utf-8 -*- __author__ = 'CQ' import requests try: import cookielib ...

  6. (12)centos之stmp服务器

    yum remove sendmail #卸载sendmail  

  7. windows下安装python、环境设置、多python版本的切换、pyserial与多版本python安装、windows命令行下切换目录

    1.windows下安装python 官网下载安装即可 2.安装后的环境设置 我的电脑--属性--高级--设置path的地方添加python安装目录,如C:\Python27;C:\Python33 ...

  8. 初学Java经典例子

    我自己看的书的理解学习Java就是学习对象,就像谈恋爱,你对她多付出,收货就多(跑题了对象是啥??对象就是实体,通过类可以生成具有特定状态(或者叫属性)和行为或动作的实例,问题来了怎么创建? new一 ...

  9. Linux使用screen实现关闭ssh连接的情况下，让程序继续在后台运行

    Ubuntu默认没有安装screen,需要手动安装. 安装命令: sudo apt-get install screen 简单的操作方法: 直接输入命令 screen 进入screen子界面,此时pu ...

  10. VC/MFC中计算程序运行时间

    转自原文VC/MFC中计算程序运行时间 说明,这四种方法也分别代表了类似的实现,在MFC中,所可以从哪些类集合去考虑. 方法一 利用GetTickCount函数(ms) CString str; lo ...