javascript - 使用媒体查询隐藏类

Question

我想要实现的是，当屏幕尺寸达到 972px 时，exit-popup-modal-window 应该隐藏。为此，我使用了媒体查询，最大显示为 972px，最小显示为 100px，显示设置为没有。仍然没有隐藏。 请建议

@media screen and (max-width: 972px) and (min-width: 100x) {
  .exitpopup-modal-window {
    display: none;
  }
}
#exitpopup-modal .modal-body {
  padding: 0px;
}
.modal-body {
  padding: 0px;
}
.second img {
  width: 369px;
  height: 404.6px;
  margin-top: -1%;
}
.first form {
  display: table;
  margin-left: 34px;
  margin-top: 43px;
}
.row1 {
  font-size: 10px;
  font-family: inherit;
  display: table-row;
  border: 2px solid red;
}
.row1 #name,
#mail,
#contact {
  color: black;
  width: 260px;
  height: 34px;
  padding: 6px 12px;
  border-radius: 3.9px;
  border-color: #777;
  display: table-cell;
}
.row1 textarea {
  width: 260px;
  height: 110px;
  color: black;
  border-color: #777;
  display: table-cell;
}
.row1 #submit {
  width: 152px;
  height: 44px;
  margin-left: 15%;
  background-color: #337ab7;
  color: white;
  border-color: none;
}
.row1 #submit:hover {
  width: 152px;
  height: 44px;
  margin-left: 15%;
  background-color: white;
  color: #337ab7;
  border-color: none;
}
.second,
.first {
  float: left;
}
.clearfix {
  clear: both
}
.first span {
  margin-left: 25%;
  font-family: inherit;
  font-size: 15px;
  padding-top: 3px;
}

<div class="exitpopup-modal-window">
  <div class="second">
    <img src="http://www.buildzar.com/listing-assets/images/home-new/get-quote/bg-lead-form-web.png">
  </div>
  <div class="first">
    <span>We are there to help you</span>
    <form id="form" name="theform">
      <div class="row1">
        <input id="name" type="text" placeholder="Your name *" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <input type="email" id="mail" placeholder="Your email *" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <input id="contact" type="number" max="10" placeholder="Your  phonenumber*" required>
        <br>
        <br>
      </div>
      <div class="row1">
        <textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea>
        <br>
        <br>
      </div>
      <div class="row1">
        <input id="submit" onclick="myformsubmit()" type="button" value="Submit">
      </div>
    </form>
  </div>
  <div class="clearfix"></div>

Answer 1

您需要以像素为单位指定宽度。

将第一行改为:

@media screen and (max-width: 972px) and (min-width: 100px) {...