基于尺寸的媒體功能

作者：佚名   時間：2014-06-07   分享到：

如今,媒體查詢通常用于檢測那些用來查看內容的媒介物的尺寸,然后提供適當的規則使內容能在這個媒介物中顯示,大文本和大釤于大顯示器,小文和單欄布局用手智能手機等這類事情,當然,媒體查詢的作用不僅僅是如此,但它的總體思路就是這樣.
   我們需要考慮以下兩種尺寸,第一,設備本身的尺寸;第二媒體物窗口在這個設備上的尺寸,當然,也可能會有用戶使用巨大的寬屏電視來訪問我們的網站,但是,就算用戶用來查看網站的應用程序只占據屏幕的四分之一,我們也不需要太顧慮這點,在某些設備中,這兩種尺寸是相同的-例如,在大多數的智能手機和平板電腦中,瀏覽器的寬度和設備寬度相同.
   窗口的尺寸最重要也是最常用的,與此相關的媒體功能是height和width.窗口尺寸功能把進行邏輯測試的單一長度值作為一個參數;如果這個尺寸等于提供的長度值,邏輯就是正確的,那么這些規則就會被應用,在下面的查詢中,當窗口的寬正好是480px時,在大括號內的規則就會被應用于窗口的body元素中;
   @media screen and (width:480px)
  {
    body{background-color:#00f;}

  }
  此示例使用了一個px值,但也可以使用其他長廊單位,無論使用哪種單位,對于大多數用途而言,準確值都有可能會太具體.然而,這功能有一對擴展,它們使之變得更加靈活.
  包括width在內的許多媒體功能,都允許在功能名稱之前添加前綴max-和min-.這兩個前綴分別代表最大值和最小值,這可能并不需要解釋,在實踐中,它們的意思是不超過和不小于.例如,使用max-width,我們可以將樣式規則應用于任何寬度不超過480像素的瀏覽器;而使用min-width,則可以把它應用于任何寬度不小于480px的瀏覽器:
  @media screen and (max-width:480px){...}
  @media screen and (mix-width:480px){...}
  由于iframe創建一個新的窗口,我們可以使用width媒體功能將規則應用于每個不同大小的窗口.iframe可以參考mq-hell.html,這個網頁在標題中包含內聯樣式塊,可以根據相匹配的媒體功能,將不同邊框樣式屬性應用于元素,此任務是通過下列三種媒體執行的:
  @media screen and(width:200px){h1{border-style:solid;}}
  @media screen and(min-width:205){h1{border-style:dotted;}}
  @media screen and(max-width:195px){h1{border-style:dashed;}}