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. [暑假集训--数位dp]hdu3652 B-number

    A wqb-number, or B-number for short, is a non-negative integer whose decimal form contains the sub- ...

  2. Laravel 控制器的middleware中间件

    场景:活动开始前只能访问宣传页面,开始后才可以访问其他页面: 步骤: 新建中间件, 注册中间件, 使用中间件, 中间件的前置和后置操作. 控制器: public function activity0( ...

  3. 洛谷——P2819 图的m着色问题

    P2819 图的m着色问题 题目背景 给定无向连通图G和m种不同的颜色.用这些颜色为图G的各顶点着色,每个顶点着一种颜色.如果有一种着色法使G中每条边的2个顶点着不同颜色,则称这个图是m可着色的.图的 ...

  4. spark与Scala安装过程和步骤及sparkshell命令的使用

    Spark与Scala版本兼容问题: Spark运行在Java 8 +,Python 2.7 + / 3.4 +和R 3.1+上.对于Scala API,Spark 2.4.2使用Scala 2.12 ...

  5. 实验十二 swing图形界面设计

    1.源程序 package information;import java.awt.Container;import java.awt.FlowLayout;import java.awt.event ...

  6. Java网络编程之InetAddress和URL

    在Java中提供了专门的网络开发程序包---java.net,java的网络编程提供了两种通信协议:TCP(传输控制协议)和UDP(数据报协议). 一.IP(Internet Protocol) 与I ...

  7. Maven用项目模板生成项目

    Archetype插件是Maven生成项目的项目模板,项目模板就是一个框,把文件夹这些定好,然后就可以在上开写具体逻辑等等. 最常用的命令: mvn archetype:generate 这个是生成一 ...

  8. [vxlan] 二 什么是VXLAN

    VXLAN是一种mac in UDP的技术.简单讲就是传统的二层帧被封装到了UDP的package中.通过UDP的IP网络发送到目的地然后再解封装. VXLAN 跟VLAN对比,最重要的一个概念就是V ...

  9. 【spring boot】mybatis启动报错：Consider defining a bean of type 'com.newhope.interview.dao.UserMapper' in your configuration. 【Mapper类不能被找到】@Mapper 和@MapperScan注解的区别

    启动报错: 2018-05-16 17:22:58.161 ERROR 4080 --- Disconnected from the target VM, address: '127.0.0.1:50 ...

  10. BUPT复试专题—寻找i*j=m的个数(2016)

    题目描述 3*3的矩阵内容. 1 2 3 2 4 6 3 6 9 即a[i][j](1<=i<=n,1<=j<=n)=i*j. 问一个这样n*n的矩阵里面,里面m出现的次数. ...