3 回答

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊
以下內(nèi)容來自Adobe docs。
媒體查詢規(guī)范還提供了關(guān)鍵字only
,用于隱藏舊瀏覽器的媒體查詢。比如not
,關(guān)鍵字必須出現(xiàn)在聲明的開頭。例如:
media="only screen and (min-width: 401px) and (max-width: 600px)"
不識(shí)別媒體查詢的瀏覽器需要以逗號(hào)分隔的媒體類型列表,并且規(guī)范說它們應(yīng)該在不是連字符的第一個(gè)非字母數(shù)字字符之前截?cái)嗝總€(gè)值。因此,舊瀏覽器應(yīng)將前面的示例解釋為:
media="only"
因?yàn)闆]有這樣的媒體類型,所以忽略樣式表。同樣,舊的瀏覽器應(yīng)該解釋
media="screen and (min-width: 401px) and (max-width: 600px)"
如
media="screen"
換句話說,它應(yīng)該將樣式規(guī)則應(yīng)用于所有屏幕設(shè)備,即使它不知道媒體查詢的含義。
不幸的是,IE 6-8未能正確實(shí)現(xiàn)規(guī)范。
它不是將樣式應(yīng)用于所有屏幕設(shè)備,而是完全忽略樣式表。
盡管存在這種行為,但仍建議僅在您希望隱藏其他不太常見的瀏覽器的樣式時(shí)才為媒體查詢添加前綴。
所以,使用
media="only screen and (min-width: 401px)"
和
media="screen and (min-width: 401px)"
將在IE6-8中具有相同的效果:兩者都將阻止使用這些樣式。但是,它們?nèi)詫⒈幌螺d。
此外,在支持CSS3媒體查詢的瀏覽器中,如果視口寬度大于401px
且媒體類型為屏幕,則兩個(gè)版本都將加載樣式。
我不完全確定哪些不支持CSS3媒體查詢的瀏覽器需要該only
版本
media="only screen and (min-width: 401px)"
而不是
media="screen and (min-width: 401px)"
確保它不被解釋為
media="screen"
對(duì)于有權(quán)訪問設(shè)備實(shí)驗(yàn)室的人來說,這將是一個(gè)很好的測(cè)試。
添加回答
舉報(bào)