js_獲取css的@media screen的值

Syinho發表於2024-03-28
JSCSS

需求場景

在適配移動端的過程中, 可以透過@media screen 來設定螢幕寬度在指定條件下的元素樣式; 現要求在pc端與移動端有不同的html結構, 可以使用window.matchMedia進行判斷並實現條件渲染

程式碼

假設我以900px作為pc端與移動端的分界

window.addEventListener(
  'resize',
  debounce(function () {
    $counter.isMobile = window.matchMedia('(max-width:900px)')?.matches
  })
)

如上程式碼所示: 透過window.matchMedia('(max-width:900px)')獲取對螢幕寬度的判斷

相關文章