CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法。目前，print 媒体的使用非常普遍，与实现单独的 “可打印版本” 相比，print 提供了更加整洁的方式来创建打印机友好的页面。screen 媒体一直未得到充分利用，原因可能是因为人们通常都认为 screen 仅仅是 “默认的呈现方式”。然而，就布局而言（尤指绝对布局），screen 媒体类型具有重要的意义，样式表规则并不关心媒体类型，因此没有涵盖这一点。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Using CSS media types</title> @CSS </head> <body> <div class="top"> @ITEMS </div> <div class="bottom"> @SUMMARY </div> </body> </html>
div.bottom { background-color: lightblue; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; } li.odd { background-color: #EAEAFF; } li.even { background-color: #FCFCFC; }
当您希望向下滚动 <div class="top"> 中编号的行时，问题出现了, summary这个元素条不再显示在底部。
修改bug方法
div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; } li.odd { background-color: #EAEAFF; } li.even { background-color: #FCFCFC; }
fixed这个属性值，当然能实现summary这个div条用于悬停在底部，但是并不是每一个版本的浏览器都支持，
当然，我希望将各种媒体以适合其显示特征的方法显示出来，但同时仍然共享独立于媒体（某些）的可视属性。要同时实现正确地屏幕显示和打印显示，我所需做的就是使用 @media 规则创建一个稍微复杂一点的样式表：
li.odd { background-color: #EAEAFF; } li.even { background-color: #FCFCFC; } @media screen { div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; } } @media print { div.bottom { position: absolute; top: 0px; } div.top { position: relative; top: 20pt; } }
可以看到，奇偶行的颜色保持不变，但是 top 和 bottom<div> 元素的特定位置针对媒体的不同做了调整。
Web之CSS开发技巧: CSS @media,布布扣,bubuko.com
原文：http://www.cnblogs.com/nn-xiaoliuzi/p/3904517.html