Web之CSS開發技巧: CSS @media

CSS @media 規則很是適合於將 HTML 或 XML 文檔定位爲目標輸出方法。目前,print 媒體的使用很是廣泛,與實現單獨的 「可打印版本」 相比,print 提供了更加整潔的方式來建立打印機友好的頁面。screen 媒體一直未獲得充分利用,緣由多是由於人們一般都認爲 screen 僅僅是 「默認的呈現方式」。然而,就佈局而言(尤指絕對佈局),screen 媒體類型具備重要的意義,樣式表規則並不關心媒體類型,所以沒有涵蓋這一點。html

<!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條用於懸停在底部,可是並非每個版本的瀏覽器都支持,spa

固然,我但願將各類媒體以適合其顯示特徵的方法顯示出來,但同時仍然共享獨立於媒體(某些)的可視屬性。要同時實現正確地屏幕顯示和打印顯示,我所需作的就是使用 @media 規則建立一個稍微複雜一點的樣式表:code

使用兩種 @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> 元素的特定位置針對媒體的不一樣作了調整。htm

相關文章
相關標籤/搜索