媒體查詢中的「屏幕」和「唯一屏幕」有什麼區別？

358

媒體查詢中「屏幕」和「唯一屏幕」有什麼區別？媒體查詢中的「屏幕」和「唯一屏幕」有什麼區別？

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

爲什麼我們需要使用 '只有'。 screen本身是否僅提供足夠的信息才能呈現給屏幕？

我見過很多響應式網站。有些使用

@media screen and (max-width:632px)

一些

@media (max-width:632px)

和一些

@media only screen and (max-width:632px)

來源

2011-12-18 Jitendra Vyas

樣式與小屏幕許多智能手機，你可以寫：

@media screen and (max-width:480px) { … }

要阻止舊版本瀏覽器從看iPhone或Android手機的樣式表，你可以寫：

@media only screen and (max-width: 480px;) { … }

閱讀本文的詳細http://webdesign.about.com/od/css3/a/css3-media-queries.htm

來源

2011-12-18 03:18:51 sandeep

我還不是很清楚。我也更新了我的問題。你能舉個例子嗎？ – 2011-12-21 18:47:00

如果您使用移動優先方法，該怎麼辦？因此，我們首先使用移動CSS，然後使用最小寬度來定位較大的網站。在這種情況下，我們不應該使用'only'關鍵字，對吧？ – Ashitaka 2012-08-03 15:55:22

這個答案很容易理解！ :)唯一的是隻是爲了保持舊版本，如IE 6或歌劇5或6加載數據，必須爲Android或Chrome 30或IE 10呈現..滿意答案sandeep :)值得+1 – 2013-10-19 00:12:01

430

讓我們打破你的例子一個接一個。

@media (max-width:632px)

這人說用的是要應用這些樣式632px一個max-width的窗口。在大小的情況下，在大多數情況下，你會談論的東西比桌面屏幕小。

@media screen and (max-width:632px)

此人說了一個screen的設備並用max-width窗口632px應用的樣式。除了您指定screen而不是other available media types之外，這與上述內容幾乎完全相同，其他最常見的是print。

@media only screen and (max-width:632px)

這裏是直接來自W3C的引用來解釋這一個。

關鍵字'only'也可用於隱藏較早用戶代理的樣式表。用戶代理必須處理以'only'開頭的媒體查詢，就好像'only'關鍵字不存在一樣。

由於沒有像「only」這樣的媒體類型，樣式表應該被舊版瀏覽器忽略。

這是頁面上的示例9中顯示的link to that quote。

希望這可以消除媒體查詢的一些問題。

編輯：

一定要在only關鍵字是如何真正處理退房@hybrids excellent answer。

來源

2011-12-21 20:03:21

+16

對於任何人正在尋找更好的解釋爲什麼*唯一'關鍵字將隱藏舊版瀏覽器的樣式表，請參閱答案@hybrid下面。他解釋得很好。 – JMTyler 2013-05-03 19:46:55

hybrid的答案很好，但我也喜歡這個答案，因爲它解決了CSS *中的媒體查詢*，而不是隻處理'link'元素的'media'屬性。 – chharvey 2015-11-02 17:04:26

什麼設備沒有屏幕？ – Kokodoko 2016-03-28 19:30:25

184

以下是來自Adobe docs。

媒體查詢規範還提供了關鍵字only，其目的是從舊的瀏覽器隱藏媒體查詢。像not一樣，關鍵字必須在聲明的開頭。例如：

media="only screen and (min-width: 401px) and (max-width: 600px)"

瀏覽器不承認媒體查詢期待一個逗號分隔的媒體類型的列表，並規範說，他們應該立即截斷每個值的第一個非字母數字字符是不是之前連字符。所以，早期瀏覽器應該解釋在前面的例子是這樣的：

media="only"

因爲是唯一沒有這樣的媒體類型，樣式表被忽略。同樣，舊的瀏覽器應該解釋

media="screen and (min-width: 401px) and (max-width: 600px)"

爲

media="screen"

換句話說，它應該將樣式規則應用於所有屏幕設備，即使它不知道媒體查詢意思。

不幸的是，IE 6-8未能正確實現規範。

而不是將樣式應用於所有屏幕設備，它會完全忽略樣式表。

儘管存在這種行爲，但仍建議僅在您希望隱藏其他不常用瀏覽器的樣式時，纔對媒體查詢加前綴。

因此，使用

media="only screen and (min-width: 401px)"

和

media="screen and (min-width: 401px)"

將在IE6-8同樣的效果：既會防止使用這些樣式。但是，它們仍然會被下載。

此外，在支持CSS3媒體查詢的瀏覽器中，如果視口寬度大於401px且媒體類型爲屏幕，則兩個版本都將加載樣式。

我不能完全肯定它的瀏覽器不支持CSS3媒體查詢需要的only版本

media="only screen and (min-width: 401px)"

，而不是

media="screen and (min-width: 401px)"

，以確保它不被解釋爲

media="screen"

對於有權訪問廣告的用戶來說，這將是一個很好的測試設備實驗室。

來源

2013-01-05 03:13:12 hybrid

因此，如果我們在討論CSS文件中的媒體查詢，我們可以放棄「僅限」，因爲舊版瀏覽器無論如何都不理解媒體查詢。難道我們不能嗎？ – 1234ru 2015-07-29 07:53:32

好，很清晰的答案。謝謝！ – 2015-10-13 08:11:34

鏈接分享真的很有幫助。謝謝 – user1645290 2016-12-06 12:41:57

回答@hybrid是相當豐富的，除了我沒有解釋@ashitaka提到的目的「如果你使用移動優先的方法？所以，我們有移動的CSS第一，然後使用最小寬度我們不應該在這種情況下使用唯一的關鍵字，對不對？「

想要在這裏添加，目的只是爲了防止不支持的瀏覽器使用其他設備樣式，就好像它從」屏幕「，如果沒有它，它將把它作爲屏幕，因爲如果它從」唯一「風格開始將被忽略。

回答到阿席達卡考慮這個例子

<link rel="stylesheet" type="text/css" 
    href="android.css" media="only screen and (max-width: 480px)" /> 
<link rel="stylesheet" type="text/css" 
    href="desktop.css" media="screen and (min-width: 481px)" />

如果我們不使用「唯一」它仍然可以工作作爲桌面樣式也將使用Android的驚人樣式，但與不必要的開銷。在這種情況下，如果瀏覽器不支持，它將回退到第二個樣式表，忽略第一個樣式表。

來源

2013-03-21 09:55:36

媒體查詢中的「屏幕」和「唯一屏幕」有什麼區別？

回答

相關問題