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)

 

THE END
亚洲中文色欧另类欧美,久久久久久久激情,亚洲 日韩 欧美 另类 国产,中文字幕高清无码男人的天堂 www.sucaiwu.net