卡卡網

在網站自適應設計中，@media與@media  screen是必須用到的css代碼，可能大家對此并不陌生。但是大家又知不知道@media與@media  screen的區(qū)別在哪呢？在自適應設計中你是用@media還是用@media  screen？你知不知道兩者產生的結果有什么不同呢？這些問題我想很多人都不清楚吧。本文便通過實例給你說說@media與@media  screen的區(qū)別，主要是告訴你它們產生的效果區(qū)別在哪。

@media與@media  screen手機網頁區(qū)別

好吧，理論方面暫時放在一邊，先看看兩者產生的手機網頁視圖有什么不同。

@media與@media  screen手機網頁

上圖看出，沒有任何區(qū)別。沒錯，確實沒有任何區(qū)別，因為@media與@media  screen的css在手機設備里都是有效的。

@media與@media  screen打印網頁區(qū)別

兩者在手機設備上沒有區(qū)別，在打印設備上是怎樣的呢？看看如下截圖。

@media打印網頁

@media  screen打印網頁

很明顯，兩者的打印效果是不同的。

至此，我們應該明白了@media與@media  screen的區(qū)別了吧，沒錯，@media  screen的css在打印設備里是無效的，而@media在打印設備里是有效的，這就是它們的區(qū)別了。

知道了它們的區(qū)別，我們就應該懂得如何使用它們了。如果css需要用在打印設備里，那么就用@media ，否則，就用@media  screen。

不過這只是籠統的做法，其實如果把“screen”換為“print”，寫為@media  print，那么該css就可用到打印設備上了，但要注意，@media  print聲明的css只能在打印設備上有效哦。

通過此實例的見解，我們可以舉一反三，對@media的用法就能更易接受了。下面的知識擴展可以讓你更深入地了解@media的各種用法。

知識擴展

@media only screen and

only(限定某種設備)
screen 是媒體類型里的一種
and 被稱為關鍵字，其他關鍵字還包括 not(排除某種設備)

/* 常用類型 */
類型 解釋
all 所有設備
braille 盲文
embossed 盲文打印
handheld 手持設備
print 文檔打印或打印預覽模式
projection 項目演示，比如幻燈
screen 彩色電腦屏幕
speech 演講
tty 固定字母間距的網格的媒體，比如電傳打字機
tv 電視

screen一般用的比較多，下面是我自己的嘗試，列出常用的設備的尺寸，然后給頁面分了幾個尺寸的版本。

/* 常用設備 */
設備 屏幕尺寸
顯示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

兩種方式

a：

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是當屏幕的寬度大于600小于800時，應用styleB.css

b：

@media screen and (max-width: 600px) {  /*當屏幕尺寸小于600px時，應用下面的CSS樣式*/
  .class {
    background: #ccc;
  }
}

device-aspect-ratio

device-aspect-ratio可以用來適配特定屏幕長寬比的設備，這也是一個很有用的屬性，比如，我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式，然后對于16:9和16:10的寬屏，定義另一種樣式，比如自適應寬度和固定寬度：

@media only screen and (device-aspect-ratio:4/3)

標簽: @media