CSS媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。
媒体类型
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 “voice-family” 属性被设计为针对听觉用户终端。其他一些属性可用于不同的媒体类型。例如,”font-size”属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans - serif字体比较适合在屏幕上阅读,而serif字体更容易在纸上阅读。
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印,将是10个像素的Times字体。请注意,font-weight在屏幕上和纸上设置为粗体:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS媒体查询</title>
<style type="text/css">
h2 {
text-align: center;
}
/*浏览器屏幕上显示一个14像素的Verdana字体样式。
但是如果页面打印,将是10个像素的Times字体。
font-weight在屏幕上和纸上设置为粗体*/
@media screen
{
p {font-family: verdana, sans-serif;
font-size: 30px;}
}
@media print
{
p {font-family: Times, serif;
font-size: 10px;}
}
@media screnn, print
{
p {font-weight: bolder;}
}
</style>
</head>
<body>
<h2>CSS媒体查询</h2>
<p>这是一些文本</p>
<p>这是一些文本</p>
<p>这是一些文本</p>
<p>这是一些文本</p>
</body>
</html>
你也可以在不同的媒体上使用不同的样式文件:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">