Web之CSS开发技巧: CSS @media

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 规则创建一个稍微复杂一点的样式表：

使用两种 @media 规则的 CSS:()

@media screen 和 @media print

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> 元素的特定位置针对媒体的不同做了调整。

转载于:https://www.cnblogs.com/nn-xiaoliuzi/p/3904517.html