CSS 媒体类型

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

一、媒体类型

一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，"font-size"属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。

二、@media 规则

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：

tml>

<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"将使用另一种比其他文本字体大小小点的字体显示。

三、其他媒体类型

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

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

  1. CSS 媒体类型 总结

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

  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. C++随机数生成方法（转载，赶紧搜藏）

    一.C++中不能使用random()函数 =============================================================================== ...

  2. Date 日期格式化

    <span id="time"></span> <script> //名称:日期加法函数 //参数:part(year.month.day.ho ...

  3. ios开发 更改状态栏

    设置statusBar 简单来说,就是设置显示电池电量.时间.网络部分标示的颜色, 这里只能设置两种颜色: 默认的黑色(UIStatusBarStyleDefault) 白色(UIStatusBarS ...

  4. 监控之snmpd 服务

    监控离不开数据采集,经常使用的Mrtg ,Cacti,Zabbix,等等监控软件都是通过snmp 协议进行数据采集的! 1 什么是snmp 协议? 简单网络管理协议(SNMP,Simple Netwo ...

  5. python基础-第九篇-9.1初了解Python线程、进程、协程

    了解相关概念之前,我们先来看一张图 进程: 优点:同时利用多个cpu,能够同时进行多个操作 缺点:耗费资源(重新开辟内存空间) 线程: 优点:共享内存,IO操作时候,创造并发操作 缺点:抢占资源 通过 ...

  6. style2paints、deepcolor、sketchkeras项目

    数据集不够怎么办? 1 一些传统的边缘提取算法可以提取图像边缘. 2 这里我们有一个使用神经网络提取线稿图的项目——sketchkeras 源码:https://github.com/lllyasvi ...

  7. Using virtual lists

    Download demo project - 15.7 Kb Contents Introduction Virtual list Creating a virtual list Add items ...

  8. Secure Sockets Layer(安全套接层)

    SSL SSL(Secure Sockets Layer安全套接层)及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TL ...

  9. mysql 约束条件 auto_increment 自动增长 清空表 自动增长情况

    清空表情况: mysql> delete from t20; Query OK, rows affected (0.00 sec) mysql> show create table t20 ...

  10. IIS 搭建过程

      Windows自带iis管理器,也就是这个 <ignore_js_op> 我们可以用它来搭建一个网站,然后在局域网内可随意访问我们的电脑.   1.首先,iis的安装.        ...