Web之CSS开发技巧: CSS @media

浏览数：83 / 时间：2015年06月09日

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;
  }
}