미디어 쿼리를 사용하여 클래스를 사용하십시오

Question

내가 원하는 것은 화면 크기가 972px에 도달 할 때 exit-popup-modal-window가 숨겨져 있어야한다는 것입니다. 미디어 쿼리를 사용하고 최대 디스플레이 크기가 972px 이상이어야합니다. 100px 디스플레이가 none으로 설정됩니다. 여전히 숨어 있지 않습니다. 당신은 폭을 픽셀 단위로 지정해야

@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; 
     } 
    }