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

@media與@media? screen手機網頁區別

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

@media與@media? screen手機網頁

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

@media與@media? screen打印網頁區別

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

@media打印網頁

@media? screen打印網頁

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

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

知道了它們的區別，我們就應該懂得如何使用它們了。如果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：

意思是當屏幕的寬度大于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)

喜歡 (0)or分享 (0)

總結

以上是生活随笔為你收集整理的在html样式@media,css样式里面的@media与@media screen的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。