媒體查詢中“屏幕”和“僅屏幕”之間有什么區別？媒體查詢screen和only screen媒體查詢之間有什么區別？<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" />我們為什么要使用only screen？難道screen不是本身提供足夠的信息來渲染只用于屏幕？我見過許多使用以下三種不同方式的響應式網站：@media screen and (max-width:632px)@media (max-width:632px)@media only screen and (max-width:632px)
3 回答
幕布斯6054654
TA貢獻1876條經驗 獲得超7個贊
以下內容來自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"
對于有權訪問設備實驗室的人來說，這將是一個很好的測試。
- 3 回答
- 0 關注
- 870 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消