<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
說起媒體查詢想必大家最先想到的都是CSS中@media
,沒錯,這是我們最常用的媒體查詢方法,主要用來為我們的網站做適配處理。
比如:
h1 { font-size: 2rem; color: green; } @media (min-width: 600px) { h1 { font-size: 4rem; } }
我們使用 CSS 告訴瀏覽器標題需要為綠色,字型大小為 2rem。但是當螢幕寬度超過 600px 時,字型大小需要增加到 4rem。
上面這種方式相信大家都並不陌生,現在我們再來嘗試另外一種媒體查詢的方法。
我們可以在 JavaScript 程式碼中使用與上面相同的媒體查詢。主要API就是 ----matchMedia()
Window
的 matchMedia()
方法返回一個新的 MediaQueryList
物件,表示指定的媒體查詢 (en-US)字串解析後的結果。返回的 MediaQueryList
可被用於判定 Document
是否匹配媒體查詢,或者監控一個 document
來判定它匹配了或者停止匹配了此媒體查詢。(MDN)
mqList = window.matchMedia(mediaQueryString)
該matchMedia()
方法接受單個引數作為其值,即您要檢查的媒體查詢。
一個用來媒體查詢的新的MediaQueryList物件
它包含兩個屬性:
media
,它將媒體查詢儲存為序列化字串
matches
,它基本上是一個布林值,如果我們作為引數提供的媒體查詢與檔案匹配則返回true
呼叫matchMedia
本身不會做太多的事情,並且我們只能在頁面載入時檢查是否滿足查詢條件,但如果我們想要在使用者改變螢幕大小時也能檢測到這種變化,在過去有兩種方法,稱為addListener()
和removeListener()
,可以使用它們來監聽媒體查詢狀態的任何變化。但是,它們現在已被棄用。
現在我們應該考慮使用MediaQueryList
addEventListener
<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>
當我們調整視窗大小時,這段程式碼會檢測螢幕寬度並更新文案
看到這裡可能大家都想到了resize
事件,沒錯該matchMedia()
方法的另一種替代方法涉及將resize
事件偵 聽 器附加到window
,同樣能夠實現上面的效果。
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();
既然兩種方案都能實現,所以我們很自然地想知道它們中的哪一個能提供更好的效能,以及我們應該在什麼時候使用這些解決方案中的每一個。
widthChangeCallback()
每次調整視窗大小時,調整大小事件偵 聽 器都會觸發該函數。這僅在某些情況下需要響應視窗大小更改的每個範例,例如更新畫布。
但是,在某些情況下,只有當寬度或高度達到某個閾值時才需要發生某些事情。一個例子就是我們上面所做的文字更新。在這種情況下,matchMedia()
將會獲得更好的效能,因為它僅在媒體查詢條件的實際更改時觸發回撥。
從上面我們可以看出兩者的回撥執行次數差異巨大,所以我們在開發過程中應當根據業務的實際需求去選擇使用哪一個API。
我們瞭解到,藉助該matchMedia()
方法,我們在 CSS 中經常使用的媒體查詢現在也可以在 JavaScript 中使用。並且使用matchMedia()
可以為我們提供更好的效能,而不是在window
上新增事件偵 聽 器resize
。與依賴於window
做一些事情的舊方法相比,我們可以使用媒體查詢執行更多檢查。
以上就是詳解如何在 JavaScript中使用媒體查詢的詳細內容,更多關於JavaScript 媒體查詢的資料請關注it145.com其它相關文章!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45