Web之CSS開發技巧: CSS @media

時間 2019-11-10

標籤 web css 開發技巧 media 欄目 HTML 简体版

原文原文鏈接

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