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. Python升级版本2.6到2.7

    CentOS 6 系统默认 Python 版本是:2.6.6 平时在使用中遇到很多的库要求是 2.7.x 版本的库,比如使用 ConfigParser 库,在 2.6 版本库就不支持没有 value ...

  2. 【Luogu】P1681最大正方形2（异或运算，DP）

    题目链接 不得不说attack是个天才.读入使用异或运算,令que[i][j]^=(i^j)&1,于是原题目变成了求que数组的最大相同值. 然而我还是不理解为啥,而且就算简化成这样我也不会做 ...

  3. [BZOJ2393] Cirno的完美算数教室（dfs+容斥原理）

    传送门 先通过dfs预处理出来所有只有2和9的数,也就大概2000多个. 想在[L,R]中找到是这些数的倍数的数,可以通过容斥原理 那么如果a % b == 0,那么便可以把 a 去掉,因为 b 的倍 ...

  4. Java统计程序运行时间

    代码如下: 第一种是以毫秒为单位计算的. long startTime = System.currentTimeMillis();    //获取开始时间 doSomething();    //测试 ...

  5. 【双向bfs】2017多校训练十 HDU 6171 Admiral

    [题意] 现在给出一个三角矩阵,如果0编号的在点(x,y)的话,可以和(x+1,y),(x-1,y),(x+1,y+1),(x-1,y-1)这些点进行交换. 我们每一次只能对0点和其他点进行交换.问最 ...

  6. 2017NOIP初赛游记

    前天晚上,玩三国杀,玩到了昨天凌晨2点40多分吧,我觉得初赛要爆炸了, 不得不吐槽一下,三国杀的武将太少了. 昨天是初赛的日子,上午8点多来了后看了看阅读程序和程序填空,复习了以下理论知识和wsj 然 ...

  7. mysql解压之后的安装

    远程连接报错(error:10061)看这篇:https://www.cnblogs.com/zipon/p/5877820.html 从5.6.20之后root会自动生成一个随机密码在/root/. ...

  8. SpringBoot项目整合Druid进行统计监控

    0.druid介绍,参考官网 1.在项目的POM文件中添加alibaba的druid依赖 <dependency> <groupId>com.alibaba</group ...

  9. Codeforces Round #265 (Div. 2) C 暴力+ 找规律+ 贪心

    C. No to Palindromes! time limit per test 1 second memory limit per test 256 megabytes input standar ...

  10. Mysql 使用存储过程添加新字段

    -- 1, 注意SQL 语句开始处不要空格 -- 2, 在使用 [--] 进行注释时,后面请加空格 USE `test`; -- lastUpdateTime drop procedure if ex ...