css樣式里面的@media與@media screen的區(qū)別

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

@media與@media? screen手機網(wǎng)頁區(qū)別

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

@media與@media? screen手機網(wǎng)頁

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

@media與@media? screen打印網(wǎng)頁區(qū)別

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

@media打印網(wǎng)頁

@media? screen打印網(wǎng)頁

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

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

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

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

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

知識擴展

@media only screen and

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

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

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

/* 常用設(shè)備 */
設(shè)備 屏幕尺寸
顯示器 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)">

意思是當(dāng)屏幕的寬度大于600小于800時，應(yīng)用styleB.css

b：

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

device-aspect-ratio

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

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