媒体类型 & 媒体查询

Posted 2020-09-20 Tekkaman

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了媒体类型 & 媒体查询相关的知识，希望对你有一定的参考价值。

【媒体类型 & 媒体查询】

　　@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>

　　如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

参考：

1、http://www.runoob.com/css/css-mediatypes.html

2、http://www.runoob.com/cssref/css3-pr-mediaquery.html

以上是关于媒体类型 & 媒体查询的主要内容，如果未能解决你的问题，请参考以下文章