CSS
@media規則非常適合於將 HTML 或 XML 文檔定位為目標輸出方法。目前，screen媒體一直未得到充分利用，原因可能是因為人們通常都認為screen僅僅是 “預設的呈現方式”。然而，就布局而言（尤指絕對布局），screen媒體類型具有重要的意義，樣式表規則並不關心媒體類型，因此沒有涵蓋這一點。
簡介
最近，我在建立某個 Ajax Web 應用程式過程中遇到了一個難以解決的問題。和建立多數 Web 應用程式一樣，我需要在螢幕的固定位置建立一個介面組件。在我的程式（本技巧）中，這個組件就是橫跨資訊顯示地區底部的工具列。對於我的實際應用程式，這個工具列包含了各種子組件，可以對應用程式進行配置和互動；就這篇技巧而言，我將它替換為一個靜態資訊集合。這種簡化不會產生 CSS 問題。
通常，將元素放入 <frame> 或 <iframe> 元素內就可解決問題。但是，使用架構不僅會損失應用程式的簡單性，還降低客戶機 ECMAscript 在互動期間控制 <div> 元素可視性的能力。最好的方法是對介面使用純粹的 CSS 表示。
第一個錯誤
對於本篇技巧，我建立了一個玩具式的檔案查看應用程式，它可以讀取 URL 或本地檔案並使用編號的行和一個類似 wc 的摘要顯示讀取內容。我希望瀏覽器顯示 1 所示的內容。
圖 1. 基於 web 的 “less -N”
為建立這種外觀，我使用如下的 HTML 範本：
檔案查看器的基本 HTML 布局
<html><head> <title>Using CSS media types</title> @CSS</head><body> <div class="top"> @ITEMS </div> <div class="bottom"> @SUMMARY </div></body></html> |
不要關心這種範本語言（並不存在）的細節；其意圖非常明顯。我嘗試使用的 CSS 為：
沒有使用 @media 規則的 CSS
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"> 中編號的行時，問題出現了：
圖 2. 非 @media 式樣式表的螢幕問題
修複 CSS
解決滾動問題的方法似乎是使用 <div> 的 fixed 而不是 absolute 布局。
使用 @media 規則的 CSS
div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px;}/* ...Rest of CSS styling */ |
這個細微的改動確實修複了玩具應用程式的螢幕顯示問題，但是現在，同一個頁面的列印版本中出現了一個令人不快的工件。為示範這個問題，我設定了一個極其短小的頁面長度：
圖 3. 非 @media 式樣式表的列印問題
當然，我希望將各種媒體以適合其顯示特徵的方法顯示出來，但同時仍然共用獨立於媒體（某些）的可視屬性。要同時實現正確地螢幕顯示和列印顯示，我所需做的就是使用 @media 規則建立一個稍微複雜一點的樣式表：
使用兩種 @media 規則的 CSS
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> 元素的特定位置針對媒體的不同做了調整。產生 4 的效果：
圖 4. 在使用 @media 規則的樣式表中糾正列印顯示
令人高興的是，螢幕仍然保持其正確的顯示狀態。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
