詳解如何在?JavaScript中使用媒體查詢
前言
說起媒體查詢想必大家最先想到的都是CSS中@media
,沒錯,這是我們最常用的媒體查詢方法,主要用來為我們的網(wǎng)站做適配處理。
比如:
h1 { font-size: 2rem; color: green; } @media (min-width: 600px) { h1 { font-size: 4rem; } }
我們使用 CSS 告訴瀏覽器標(biāo)題需要為綠色,字體大小為 2rem。但是當(dāng)屏幕寬度超過 600px 時(shí),字體大小需要增加到 4rem。
上面這種方式相信大家都并不陌生,現(xiàn)在我們再來嘗試另外一種媒體查詢的方法。
在JavaScript中使用媒體查詢
我們可以在 JavaScript 代碼中使用與上面相同的媒體查詢。主要API就是 ----matchMedia()
Window.matchMedia()
Window
的 matchMedia()
方法返回一個(gè)新的 MediaQueryList
對象,表示指定的媒體查詢 (en-US)字符串解析后的結(jié)果。返回的 MediaQueryList
可被用于判定 Document
是否匹配媒體查詢,或者監(jiān)控一個(gè) document
來判定它匹配了或者停止匹配了此媒體查詢。(MDN)
語法
mqList = window.matchMedia(mediaQueryString)
參數(shù)
該matchMedia()
方法接受單個(gè)參數(shù)作為其值,即您要檢查的媒體查詢。
- mediaQueryString:一個(gè)被用于媒體查詢解析的字符串。
返回值
一個(gè)用來媒體查詢的新的MediaQueryList對象
它包含兩個(gè)屬性:
media
,它將媒體查詢存儲為序列化字符串
matches
,它基本上是一個(gè)布爾值,如果我們作為參數(shù)提供的媒體查詢與文檔匹配則返回true
調(diào)用matchMedia
本身不會做太多的事情,并且我們只能在頁面加載時(shí)檢查是否滿足查詢條件,但如果我們想要在用戶改變屏幕大小時(shí)也能檢測到這種變化,在過去有兩種方法,稱為addListener()
和removeListener()
,可以使用它們來監(jiān)聽媒體查詢狀態(tài)的任何變化。但是,它們現(xiàn)在已被棄用。
現(xiàn)在我們應(yīng)該考慮使用MediaQueryList
addEventListener
addEventListener
matchMedia - change
<div id="show"></div> <script> let mqList = window.matchMedia('(min-width: 600px)'); function widthChangeCallback(mqList) { console.log(mqList, '-') if(mqList.matches) { show.innerHTML = `<p class="large">我比599px大</p>`; } else { show.innerHTML = `<p class="small">我比599px小</p>`; } } widthChangeCallback(mqList) mqList.addEventListener('change', widthChangeCallback); </script>
當(dāng)我們調(diào)整窗口大小時(shí),這段代碼會檢測屏幕寬度并更新文案
window - resize
看到這里可能大家都想到了resize
事件,沒錯該matchMedia()
方法的另一種替代方法涉及將resize
事件偵 聽 器附加到window
,同樣能夠?qū)崿F(xiàn)上面的效果。
function widthChangeCallback() { if(window.innerWidth > 599) { show.innerHTML = `<p class="large">我比599px大</p>`; } else { show.innerHTML = `<p class="small">我比599px小</p>`; } } window.addEventListener('resize', widthChangeCallback); widthChangeCallback();
性能對比
既然兩種方案都能實(shí)現(xiàn),所以我們很自然地想知道它們中的哪一個(gè)能提供更好的性能,以及我們應(yīng)該在什么時(shí)候使用這些解決方案中的每一個(gè)。
widthChangeCallback()
每次調(diào)整窗口大小時(shí),調(diào)整大小事件偵 聽 器都會觸發(fā)該函數(shù)。這僅在某些情況下需要響應(yīng)窗口大小更改的每個(gè)實(shí)例,例如更新畫布。
但是,在某些情況下,只有當(dāng)寬度或高度達(dá)到某個(gè)閾值時(shí)才需要發(fā)生某些事情。一個(gè)例子就是我們上面所做的文本更新。在這種情況下,matchMedia()
將會獲得更好的性能,因?yàn)樗鼉H在媒體查詢條件的實(shí)際更改時(shí)觸發(fā)回調(diào)。
從上面我們可以看出兩者的回調(diào)執(zhí)行次數(shù)差異巨大,所以我們在開發(fā)過程中應(yīng)當(dāng)根據(jù)業(yè)務(wù)的實(shí)際需求去選擇使用哪一個(gè)API。
總結(jié)
我們了解到,借助該matchMedia()
方法,我們在 CSS 中經(jīng)常使用的媒體查詢現(xiàn)在也可以在 JavaScript 中使用。并且使用matchMedia()
可以為我們提供更好的性能,而不是在window
上添加事件偵 聽 器resize
。與依賴于window
做一些事情的舊方法相比,我們可以使用媒體查詢執(zhí)行更多檢查。
以上就是詳解如何在 JavaScript中使用媒體查詢的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 媒體查詢的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序 天氣預(yù)報(bào)開發(fā)實(shí)例代碼源碼
這篇文章主要介紹了微信小程序 天氣預(yù)報(bào)開發(fā)實(shí)例代碼源碼的相關(guān)資料,這里含有源碼,需要的朋友可以參考下2017-01-01electron渲染進(jìn)程主進(jìn)程相互傳值示例解析
這篇文章主要為大家介紹了electron渲染進(jìn)程主進(jìn)程相互傳值示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序封裝http訪問網(wǎng)絡(luò)庫實(shí)例代碼
這篇文章主要介紹了微信小程序封裝http訪問網(wǎng)絡(luò)庫實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-05-05微信小程序 image組件binderror使用例子與js中的onerror區(qū)別
這篇文章主要介紹了微信小程序 image組件binderror使用例子與js中的onerror區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02