如何在 JavaScript 中使用媒体查询
<h2 id="前言">前言</h2><p>说起媒体查询想必大家最先想到的都是CSS中<code>@media</code>，没错，这是我们最常用的媒体查询方法，主要用来为我们的网站做适配处理。</p>
<p>比如：</p>
<pre><code class="language-css">h1 {
font-size: 2rem;
color: green;
}
@media (min-width: 600px) {
h1 {
font-size: 4rem;
}
}
</code></pre>
<p>我们使用 CSS 告诉浏览器标题需要为绿色，字体大小为 2rem。但是当屏幕宽度超过 600px 时，字体大小需要增加到 4rem。</p>
<p>上面这种方式相信大家都并不陌生，现在我们再来尝试另外一种媒体查询的方法。</p>
<h2 id="在javascript中使用媒体查询">在JavaScript中使用媒体查询</h2>
<p>我们可以在 JavaScript 代码中使用与上面相同的媒体查询。主要API就是 ----<code>matchMedia()</code></p>
<h3 id="windowmatchmedia">Window.matchMedia()</h3>
<blockquote>
<p><code>Window</code> 的 <strong><code>matchMedia()</code></strong> 方法返回一个新的 <code>MediaQueryList</code>对象，表示指定的媒体查询 (en-US)字符串解析后的结果。返回的 <code>MediaQueryList</code> 可被用于判定 <code>Document</code> 是否匹配媒体查询，或者监控一个 <code>document</code> 来判定它匹配了或者停止匹配了此媒体查询。(MDN)</p>
</blockquote>
<h4 id="语法">语法</h4>
<pre><code class="language-js">mqList = window.matchMedia(mediaQueryString)
</code></pre>
<h4 id="参数">参数</h4>
<p>该<code>matchMedia()</code>方法接受单个参数作为其值，即您要检查的媒体查询。</p>
<ul>
<li>mediaQueryString：一个被用于媒体查询解析的字符串。</li>
</ul>
<h4 id="返回值">返回值</h4>
<p>一个用来媒体查询的新的<code>MediaQueryList</code>对象</p>
<p>它包含两个属性：</p>
<ul>
<li>
<p><code>media</code>，它将媒体查询存储为序列化字符串</p>
</li>
<li>
<p><code>matches</code>，它基本上是一个布尔值，如果我们作为参数提供的媒体查询与文档匹配则返回<code>true</code></p>
</li>
</ul>
<p>调用<code>matchMedia</code>本身不会做太多的事情，并且我们只能在页面加载时检查是否满足查询条件，但如果我们想要在用户改变屏幕大小时也能检测到这种变化，在过去有两种方法，称为<code>addListener()</code>和<code>removeListener()</code>，可以使用它们来监听媒体查询状态的任何变化。但是，它们现在已被弃用。</p>
<p>现在我们应该考虑使用<code>MediaQueryList</code> <code>addEventListener</code></p>
<h3 id="addeventlistener">addEventListener</h3>
<h4 id="matchmedia---change">matchMedia - change</h4>
<pre><code class="language-html"><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>
</code></pre>
<p>当我们调整窗口大小时，这段代码会检测屏幕宽度并更新文案</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4fca097bc7a343bb854a22bd4f9f2f8a~tplv-k3u1fbpfcp-watermark.image?"></p>
<h4 id="window---resize">window - resize</h4>
<p>看到这里可能大家都想到了<code>resize</code>事件，没错该<code>matchMedia()</code>方法的另一种替代方法涉及将<code>resize</code>事件侦听器附加到<code>window</code>，同样能够实现上面的效果。</p>
<pre><code class="language-js">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();
</code></pre>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4fca097bc7a343bb854a22bd4f9f2f8a~tplv-k3u1fbpfcp-watermark.image?"></p>
<h3 id="性能对比">性能对比</h3>
<p>既然两种方案都能实现，所以我们很自然地想知道它们中的哪一个能提供更好的性能，以及我们应该在什么时候使用这些解决方案中的每一个。</p>
<p><code>widthChangeCallback()</code>每次调整窗口大小时，调整大小事件侦听器都会触发该函数。这仅在某些情况下需要响应窗口大小更改的每个实例，例如更新画布。</p>
<p>但是，在某些情况下，只有当宽度或高度达到某个阈值时才需要发生某些事情。一个例子就是我们上面所做的文本更新。在这种情况下，<code>matchMedia()</code>将会获得更好的性能，因为它仅在媒体查询条件的实际更改时触发回调。</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ad6a697bd2c4a099631d079674b137c~tplv-k3u1fbpfcp-watermark.image?"></p>
<p>从上面我们可以看出两者的回调执行次数差异巨大，所以我们在开发过程中应当根据业务的实际需求去选择使用哪一个API。</p>
<h2 id="总结">总结</h2>
<p>我们了解到，借助该<code>matchMedia()</code>方法，我们在 CSS 中经常使用的媒体查询现在也可以在 JavaScript 中使用。并且使用<code>matchMedia()</code>可以为我们提供更好的性能，而不是在<code>window</code> 上添加事件侦听器<code>resize</code>。与依赖于<code>window</code>做一些事情的旧方法相比，我们可以使用媒体查询执行更多检查。</p>
</div>
<div id="MySignature" role="contentinfo">
<div style="color: blueviolet">
<div>作者：前端南玖</div>
<div>出处：https://www.cnblogs.com/songyao666/
</div>
<div>每日面试题：Github</div>
<p>-------------------------------------------</p>
<p>如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新的文章～</p>
<p>扫描下方二维码关注公众号，回复进群，拉你进前端学习交流群</p>
<div style="display:flex">
<img src="https://blog-static.cnblogs.com/files/songyao666/nanjiu.gif?t=2" alt="逐梦wx" width="380" height="190"/>
</div>
</div><br><br>
来源：https://www.cnblogs.com/songyao666/p/17175307.html
頁:
[1]