為什麼我不能在媒體查詢中使用 CSS 變數？

原生CSS 變數在媒體查詢中不可用

CSS 變數的早期使用者在嘗試將其合併到媒體查詢時可能會遇到問題。常見的方法如：

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

將無法如預期運作。

幕後：CSS 規範限制

根據 CSS 規範，var() 函數只適用於屬性值。它在其他上下文中是被禁止的，例如屬性名稱、選擇器或媒體查詢。這就解釋了為什麼在媒體查詢中使用它是無效的。

操作注意事項

這個限制是合乎邏輯的。雖然 CSS 變數可以分配給根元素（例如 ）並由後代繼承，但媒體查詢本身不是元素，因此缺乏繼承功能。

替代解決方案

CSS 變數並非旨在解決此特定用例。作為一種解決方法，可以使用 CSS 預處理器，它提供附加功能並允許在媒體查詢中使用變數。

以上是為什麼我不能在媒體查詢中使用 CSS 變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！