如何在 JavaScript 中使用媒体查询
前言
说起媒体查询想必大家最先想到的都是CSS中@media
,没错,这是我们最常用的媒体查询方法,主要用来为我们的网站做适配处理。
比如:
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()
方法接受单个参数作为其值,即您要检查的媒体查询。
- mediaQueryString:一个被用于媒体查询解析的字符串。
返回值
一个用来媒体查询的新的MediaQueryList
对象
它包含两个属性:
media
,它将媒体查询存储为序列化字符串matches
,它基本上是一个布尔值,如果我们作为参数提供的媒体查询与文档匹配则返回true
调用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 = `<p class="large">我比599px大</p>`;
} else {
show.innerHTML = `<p class="small">我比599px小</p>`;
}
}
widthChangeCallback(mqList)
mqList.addEventListener('change', widthChangeCallback);
</script>
当我们调整窗口大小时,这段代码会检测屏幕宽度并更新文案
window - resize
看到这里可能大家都想到了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中使用媒体查询media query
由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...
- 如何在 JavaScript 中检查字符串是否包含子字符串?
如何在 JavaScript 中检查字符串是否包含子字符串? // var test4 = _.includes(string, substring); 该方法需要此文件 <script src ...
- 如何在Javascript中利用封装这个特性
对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...
- 如何在C#中调试LINQ查询
原文:How to Debug LINQ queries in C# 作者:Michael Shpilt 译文:如何在C#中调试LINQ查询 译者:Lamond Lu 在C#中我最喜欢的特性就是LIN ...
- django 如何在HMTL中使用媒体media_url
django 如何在HMTL中使用媒体media_url中指定的路径 第一种: 一. setting.py里,一般图片或者文件上传路径都是是以下设置, MEDIA_URL = '/media/' ...
- 如何在JavaScript中使用for循环
前言 循环允许我们通过循环数组或对象中的项并做一些事情,比如说打印它们,修改它们,或执行其他类型的任务或动作.JavaScript有各种各样的循环,for循环允许我们对一个集合(如数组)进行迭代. 在 ...
- Bulma 中的媒体查询
在 Bulma 中将设备分为 6 类:手机.平板.触屏设备.桌面.宽屏和大屏.提供了四个阈值. // sass/utilities/variables.sass $tablet: 769px !def ...
- 如何在JavaScript中正确引用某个方法(bind方法的应用)
在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...
- 如何在JavaScript中使用高阶函数
将另一个函数作为参数的函数,或者定义一个函数作为返回值的函数,被称为高阶函数. JavaScript可以接受高阶函数.这种处理高阶函数的能力以及其他特点,使JavaScript成为非常适合函数式编程的 ...
- 前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话"凡是能用JavaScript实现的 ...
随机推荐
- meta标签补充
shrink-to-fit=no 使用"width=device-width"会导致页面按比例缩小,以适应超出视口边界的内容. 使用将"shrink-to-fit=no& ...
- Spring IOC源码(二):IOC容器之 刷新前的准备
1.源码解析 prepareRefresh()容器刷新refresh()的第一个方法,是容器刷新前的准备工作. 1 // 容器启动的开始时间 毫秒级 2 private long startupDat ...
- 解读JVM级别本地缓存Caffeine青出于蓝的要诀2 —— 弄清楚Caffeine的同步、异步回源方式
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中,我们继Guava Cac ...
- 手把手教你一套完善且高效的k8s离线部署方案
作者:郝建伟 背景 面对更多项目现场交付,偶而会遇到客户环境不具备公网条件,完全内网部署,这就需要有一套完善且高效的离线部署方案. 系统资源 编号 主机名称 IP 资源类型 CPU 内存 磁盘 01 ...
- 区块链,中心去,何曾着眼看君王?用Go语言实现区块链技术,通过Golang秒懂区块链
区块链技术并不是什么高级概念,它并不比量子力学.泡利不相容原则.哥德巴赫猜想更难以理解,但却也不是什么类似"时间就是金钱"这种妇孺皆知的浅显道理.区块链其实是一套统筹组织记录的方法 ...
- NSSCTF_HUBUCTF的web部分题解
checkin 题目: 主要是php弱比较和序列化知识点考察 <?php $username = "this_is_secret"; $password = "th ...
- Flutter异常监控 - 叁 | 从bugsnag源码学习如何追溯异常产生路径
如果觉得文章对你有帮助,点赞.收藏.关注.评论,一键四连支持,你的支持就是我创作最大的动力. ️ 本文原创听蝉 公众号:码里特别有禅 欢迎关注原创技术文章第一时间推送 ️ 前言 没错,继Flutte ...
- mybatis-config.xml 说明
mybatis-config.xml 说明 文件结构 MyBatis 的配置文件包含了会深深影响 MyBatis 行为的设置和属性信息. 配置文档的顶层结构如下: configuration(配置) ...
- 华为云Stack新版发布:构筑行业云底座,共创行业新价值
摘要:在以"政企深度用云,释放数字生产力"为主题的华为云Stack战略暨新品发布会上,华为云提出深度用云三大关键举措,并发布华为云Stack 8.2版本,以智能进化推动创造行业新价 ...
- DataGrid 设置某列可见或只读
在ASP.NET中使用 DataGrid数据展示控件时,可以对数据进行展示,编辑,删除,在有些时候不希望某列被修改,进行如下设置 点击编辑后 想要如下效果 其中权限编码和权限分类不希望修改 设置方法 ...