內嵌 CSS 可以處理動態圖片載入的媒體查詢嗎？

內聯 CSS @media 法則：可行的方法？

在 Web 開發中，根據螢幕寬度動態載入橫幅影像是常見要求。一種可能的解決方案是利用內聯 CSS @media 規則來確定螢幕寬度並顯示適當的圖像。然而，這種方法的可行性卻引發了質疑。

內嵌 CSS 約束

不幸的是，內嵌 CSS 屬性在語法上受到限制，無法容納 @media at-rules或媒體查詢。根據 CSS 規範，樣式屬性的值必須符合 CSS 宣告區塊內容的語法，不包含這些建構。

替代解決方案

因此，主要將特定於媒體的樣式應用於特定元素的選項是在樣式表：

#myelement {
  background-image: url(particular_ad.png);
}

@media (max-width: 300px) {
  #myelement {
    background-image: url(particular_ad_small.png);
  }
}

對於使用選擇器隔離元素具有挑戰性的情況，自訂屬性提供了一個可行的解決方案，假設對變數賦值的支援不是問題：

:root {
  --particular-ad: url(particular_ad.png);
}

@media (max-width: 300px) {
  :root {
    --particular-ad: url(particular_ad_small.png);
  }
}

<span></span>

以上是內嵌 CSS 可以處理動態圖片載入的媒體查詢嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！