CSS 媒体类型
2024-08-24 12:37:38
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"将使用另一种比其他文本字体大小小点的字体显示。
三、其他媒体类型
注意:媒体类型名称不区分大小写。
最新文章
- SQL Server在执行SQL语句时,表之间驱动顺序对性能的影响
- easyui numberbox一些常用属性,方法
- 利用TaskCompletionSource将EAP转换成TAP
- [Leetcode|SQL] Combine Two Tables
- 21SpringMvc_异步发送表单数据到Bean,并响应JSON文本返回(这篇可能是最重要的一篇了)
- SQL 中delete和truncate区别
- Chapter 5
- poj3308 Paratroopers --- 最小点权覆盖-&;gt;最小割
- QSplashScreen无法背景透明的解决办法
- I Think I Need a Houseboat
- Runtime of Objective-C
- 结合程序崩溃后的core文件分析bug
- Numpy入门 - 数组排序
- 用DFS求连通块(种子填充)
- Echarts属性大全(及时更新最新信息)
- LOJ #2527 Luogu P4491「HAOI2018」染色
- 回溯法解n皇后问题
- 编译安装php-7.1.17及部分扩展
- nodejs初探一二
- Oracle11g 查询长时间运行的SQL