时间戳

首页 > 解决方案 > JavaScript 中的 Window.matchMedia 不起作用

javascript - JavaScript 中的 Window.matchMedia 不起作用

问题描述

我有一个 HTML、CSS 和 JavaScript 文件。HTML 包含三个引号，每两秒随机播放一次。我编写了 JavaScript 代码，仅当屏幕宽度最多为 600 像素时才显示这些引号。问题是报价继续显示在每个屏幕宽度上。我尝试在 CSS 中使用媒体查询，但无济于事。可能是什么问题？请看下面的代码。

HTML 代码：

<div class="preNavBar">
        <div class="quoteWrapper">
            <span class="quote">The roots of education are bitter, but the fruit is sweet. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Aristotle</span>
        </div>
        <div class="quoteWrapper">
            <span class="quote">To teach is to learn twice. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Unknown</span>
        </div>
        <div class="quoteWrapper">
            <span class="quote">A person who won't read has no advantage over one who can't read. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Mark Twain</span>
        </div>
    </div>

CSS 代码：

body {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16pxm;
    background: rgb(53, 54, 58);
}

* {
    box-sizing: border-box;
    /* margin: 0; */
    padding: 0;
}

/* PRE-NAVIGATION BAR */
.preNavBar {
    background-color: navy;
    color: white;
    padding: 10px 30px;
    display: grid;
    justify-content: center;
}

.preNavBar .quoteAuthor {
    font-weight: bolder;
    float: right;
}

@media only screen and (min-width: 768px) {
    /* .preNavBar .quoteWrapper{
        display: none;
    } */
}

JavaScript 代码：

<script>
        let x = window.matchMedia("(max-width: 600px)");
        if (x.matches) {
            showQuote();
            function showQuote() {
                let slides = document.getElementsByClassName("quoteWrapper");
                let i;
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }

                let min = 0;
                let max = slides.length - 1;
                let randNum = Math.floor(Math.random() * (max - min + 1)) + min;

                slides[randNum].style.display = "block";

                setTimeout(showQuote, 2000); // change every 2 seconds
            }
        }
    </script>

标签： javascripthtmlcss

解决方案

让我们看一下第一行：

let x = window.matchMedia("(max-width: 800px)");

您调用window.matchMedia并将返回值存储在x.

这里重要的是，x如果屏幕在声明后调整大小，它不会改变。

如果你愿意，你需要一个resize 事件监听器。

此外，这里可能存在的一个陷阱是，根据您的<script>标签在文档中的位置，您可能希望将所有代码包装到IIFE中，以确保它在文档完全加载后触发。

推荐阅读