CSS樣式表教程:screen媒體類型的作用

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　CSS

　　@media

　　規則非常適合於將 HTML 或 XML 文檔定位為目標輸出方法。目前，

　　媒體的使用非常普遍，與實現單獨的 “可列印版本” 相比，

　　提供了更加整潔的方式來建立印表機友好的頁面。

　　screen

　　媒體一直未得到充分利用，原因可能是因為人們通常都認為

　　screen

　　僅僅是 “預設的呈現方式”。然而，就布局而言(尤指絕對布局)，

　　screen

　　媒體類型具有重要的意義，樣式表規則並不關心媒體類型，因此沒有涵蓋這一點。

　　最近，我在建立某個 Ajax Web 應用程式過程中遇到了一個難以解決的問題。和建立多數 Web 應用程式一樣，我需要在螢幕的固定位置建立一個介面組件。在我的程式(本技巧)中，這個組件就是橫跨資訊顯示地區底部的工具列。對於我的實際應用程式，這個工具列包含了各種子組件，可以對應用程式進行配置和互動;就這篇技巧而言，我將它替換為一個靜態資訊集合。這種簡化不會產生 CSS 問題。

　　通常，將元素放入

　　或

<iframe>元素內就可解決問題。但是，使用架構不僅會損失應用程式的簡單性，還降低客戶機 ECMAscript 在互動期間控制<div>元素可視性的能力。最好的方法是對介面使用純粹的 CSS 表示。

對於本篇技巧，我建立了一個玩具式的檔案查看應用程式，它可以讀取 URL 或本地檔案並使用編號的行和一個類似wc的摘要顯示讀取內容。我希望瀏覽器顯示如圖 1 所示的內容。

為建立這種外觀，我使用如下的 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 為：

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">中編號的行時，問題出現了：

解決滾動問題的方法似乎是使用<div>的fixed而不是absolute布局。

div.bottom {    background-color: lightblue;    position: fixed;    bottom: 0px;    left: 0px;    right: 0px;    height: 20px;}/* ...Rest of CSS styling */

這個細微的改動確實修複了玩具應用程式的螢幕顯示問題，但是現在，同一個頁面的列印版本中出現了一個令人不快的工件。為示範這個問題，我設定了一個極其短小的頁面長度：

當然，我希望將各種媒體以適合其顯示特徵的方法顯示出來，但同時仍然共用獨立於媒體（某些）的可視屬性。要同時實現正確地螢幕顯示和列印顯示，我所需做的就是使用@media規則建立一個稍微複雜一點的樣式表：

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 的效果：

令人高興的是，螢幕仍然保持其正確的顯示狀態。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More