首页 > 代码库 > Web之CSS开发技巧: CSS @media

Web之CSS开发技巧: CSS @media

2024-07-16 22:28:57   222人阅读

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


联系
我们