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