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

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

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

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

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

兩者在手機(jī)設(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)的做法，其實(shí)如果把“screen”換為“print”，寫為@media? print，那么該css就可用到打印設(shè)備上了，但要注意，@media? print聲明的css只能在打印設(shè)備上有效哦。

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

知識擴(kuò)展

@media only screen and

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

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

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

/* 常用設(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時(shí)，應(yīng)用styleB.css

b：

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

device-aspect-ratio

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

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