文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何在 JavaScript 中使用媒体查询

2024-11-30 18:04

关注

比如:

h1 {
font-size: 2rem;
color: green;
}
@media (min-width: 600px) {
h1 {
font-size: 4rem;
}
}

我们使用 CSS 告诉浏览器需要为绿色,字体大小为 2rem。但是当屏幕宽度超过 600px 时,字体大小需要增加到 4rem。

上面这种方式相信大家都并不陌生,现在我们再来尝试另外一种媒体查询的方法。

在JavaScript中使用媒体查询

我们可以在 JavaScript 代码中使用与上面相同的媒体查询。主要API就是 ----matchMedia()

Window.matchMedia()

Window​ 的 「​matchMedia()」 方法返回一个新的 MediaQueryList​对象,表示指定的媒体查询 (en-US)字符串解析后的结果。返回的 MediaQueryList​ 可被用于判定 Document​ 是否匹配媒体查询,或者监控一个 document 来判定它匹配了或者停止匹配了此媒体查询。(MDN)

语法

mqList = window.matchMedia(mediaQueryString)

参数

该matchMedia()方法接受单个参数作为其值,即您要检查的媒体查询。

返回值

一个用来媒体查询的新的MediaQueryList对象。

它包含两个属性:

调用matchMedia本身不会做太多的事情,并且我们只能在页面加载时检查是否满足查询条件,但如果我们想要在用户改变屏幕大小时也能检测到这种变化,在过去有两种方法,称为addListener()和removeListener(),可以使用它们来监听媒体查询状态的任何变化。但是,它们现在已被弃用。

现在我们应该考虑使用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 = `

我比599px大

`
;
} else {
show.innerHTML = `

我比599px小

`
;
}
}
widthChangeCallback(mqList)
mqList.addEventListener('change', widthChangeCallback);
</script>

当我们调整窗口大小时,这段代码会检测屏幕宽度并更新文案


window - resize

看到这里可能大家都想到了resize事件,没错该matchMedia()方法的另一种替代方法涉及将resize事件侦听器附加到window,同样能够实现上面的效果。

function widthChangeCallback() {
if(window.innerWidth > 599) {
show.innerHTML = `

我比599px大

`
;
} else {
show.innerHTML = `

我比599px小

`
;
}
}
window.addEventListener('resize', widthChangeCallback);
widthChangeCallback();


性能对比

既然两种方案都能实现,所以我们很自然地想知道它们中的哪一个能提供更好的性能,以及我们应该在什么时候使用这些解决方案中的一个。

widthChangeCallback()每次调整窗口大小时,调整大小事件侦听器都会触发该函数。这仅在某些情况下需要响应窗口大小更改的每个实例,例如更新画布。

但是,在某些情况下,只有当宽度或高度达到某个阈值时才需要发生某些事情。一个例子就是我们上面所做的文本更新。在这种情况下,matchMedia()将会获得更好的性能,因为它仅在媒体查询条件的实际更改时触发回调。

从上面我们可以看出两者的回调执行次数差异巨大,所以我们在开发过程中应当根据业务的实际需求去选择使用哪一个API。

总结

我们了解到,借助该matchMedia()方法,我们在 CSS 中经常使用的媒体查询现在也可以在 JavaScript 中使用。并且使用matchMedia()可以为我们提供更好的性能,而不是在window 上添加事件侦听器resize。与依赖于window做一些事情的旧方法相比,我们可以使用媒体查询执行更多检查。

来源:前端南玖内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯