使用媒体查询使用一个类

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) {...

Answer 2

这是jsfiddle

 @media screen and (max-width: 972px) and (min-width: 100px) 
    {
    .exitpopup-modal-window{
       display:none;
      }
    }