你可以將什麼放入媒體查詢表達式？

Question

在以下媒體查詢的樣式聲明中定義的樣式將通過屏幕觀看並且當被應用時最小寬度爲480像素寬（正確）：

@media screen and (min-width: 480px) { 
    #leftsidebar {width: 200px; float: left;} 
    #main {margin-left:216px;} 
} 

你可以把什麼別的成表達式語句？

例如，我想對URL片段條件：

@media screen and (document.location.hash=="#about") { 
    #leftsidebar {width: 200px; float: left;} 
    #main {margin-left:216px;} 
} 

@media screen and (document.location.hash=="#services") { 
    #leftsidebar {width: 200px; float: left;} 
    #main {margin-left:216px;} 
} 

@media screen and (document.location.hash=="#contact") { 
    #leftsidebar {width: 200px; float: left;} 
    #main {margin-left:216px;} 
} 

Answer 1

你可以把什麼成爲一個媒體查詢表達式？

您只能放置媒體功能。規範中記錄了唯一可用的介質功能（MQ3，MQ4）。

例如，我想條件對URL片段：

這是不幸的是沒有可能的媒體查詢，雖然這聽起來像一個有趣的使用情況，而不必訴諸於應用網址片段到html或body或其他任意包裝元素。雖然我不確定這個URL片段不是設備媒體本身的一部分，但它是URL的一部分，但我不確定它與媒體查詢有多好。此功能將更適合於自己的規則（例如現在消失的@document）或作爲選擇器的一部分。

我能想到的最接近的純選擇器替代方案（對每個選擇器都預加:root:has(#about:target),:root:has(#services:target)等）在選擇器4中，甚至對於CSS都不可用，所以這是一個真正的失敗者。