首页 > 代码库 > 媒体类型 & 媒体查询
媒体类型 & 媒体查询
【媒体类型 & 媒体查询】
@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
媒体类型 & 媒体查询
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。