javascript - JS matchMedia：你也可以用这个来匹配屏幕吗？

Question

我有一个两列布局，我的页脚版权在左侧。当我将屏幕尺寸减小到移动设备进行测试时，左侧的页脚被放在中间，第二列在页脚之后开始。

我可以用带有 matchMedia() 的 JavaScript 来解决这个问题。但是，matchMedia() 仅适用于移动设备。有没有办法匹配媒体和屏幕？matchMediaScreen() 之类的东西？参见示例：

.branding-color { 
     background-color: darkblue;
}

.welcome,
.students { 
     color: white;
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row vh-100">
    <div class="col-md-4">
      <section class="row logo-area mb-5 p-3">
        <div class="col-6">
          <a href="/index.php">
            <img class="img-fluid" :src="logo" alt="Secret Logo" />
          </a>
        </div>
        <div class="col-6 text-right">
          <img class="img-fluid " :src="hpoLogo" alt="Secret Logo">
        </div>
      </section>
      <!-- row logo-area -->

      <div class="col-sm-12 d-flex justify-content-center flex-column text-center uni-center">
        <div class="mb-5">
          <img class="img-fluid uni-logo" :src="universityLogo" alt="" />
        </div>
        <div class="login mb-5">
          <a class="btn btn-blue mr-2" href="/login.php">Login</a>
          <a class="btn btn-green" href="/register.php">Register</a>
        </div>
        <nav class="nav flex-column mb-5">
          <a href="#">Support</a>
          <a href="#">Privacy Policy</a>
          <a href="#">Terms &amp; Conditions</a>
        </nav>
        <div class="social">
          <a href="#"><img :src="facebook" alt="" /></a>
          <a href="#"><img :src="twitter" alt="" /></a>
          <a href="#"><img :src="instagram" alt="" /></a>
          <a href="#"><img :src="mail" alt="" /></a>
        </div>
      </div>
      <footer>
        <p class="text-center">© 2019 All rights reserved. Designed and hosted by Someone Special</p>
      </footer>
    </div>
    <!-- col-md-3 -->
    <div class="col-md-8 d-flex align-items-center justify-content-center branding-color">
      <div class="col-md-8 welcome-white rounded">
        <h2 class="welcome m-0 font-weight-bold">Welcome</h2>
        <h2 class="students mb-5">Students</h2>
      </div>
    </div>
    <!-- col-md-8 -->
    <div class="m-footer"></div>
  </div>
  <!-- row  -->
</div>
<!-- container-fluid -->

标签： javascript

Answer 1

MDN 说：

在 JavaScript 中，您可以使用 Window.matchMedia() 方法针对媒体查询测试窗口。

因此，例如：

const query = window.matchMedia("screen and (min-width: 992px)");

你插入的只是一个字符串，所以如果你使用 ES2015 ，你可以很容易地用模板文字做一些聪明的事情：

const min = 576;
const getMediaQuery = minWidth =>
  window.matchMedia(`screen and (min-width: ${minWidth}px)`);
const query = getMediaQuery(min);

const screenTest = e =>
  e.matches
    ? console.info(`The window is at least ${min}px wide.`)
    : console.info(`The window is less than ${min}px wide.`);

query.addListener(screenTest);
screenTest(query);