미디어 쿼리

그래서 두 개의 div를 아래와 같이있다 :미디어 쿼리

/*for ipad portrait and landscape*/ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) { 
 
    .aclass { 
 
     display: block; 
 
     background-color: antiquewhite; 
 
    } 
 
    .bclass { 
 
     display: none; 
 
    } 
 
} 
 

 
/*for medium device*/ 
 
@media only screen 
 
and (min-width : 992px) 
 
and (max-width : 1200px) { 
 
    .aclass { 
 
     display: none; 
 
    } 
 
    .bclass { 
 
     display: block; 
 
     background-color: aquamarine; 
 
    } 
 
}

<div class="hidden-xs aclass">div 1</div> 
 
<div class="hidden-xs bclass">div 2</div>

내가 aclass은 아이 패드에 적용하고 bclass 데스크톱과 같은 매체 장치에 적용하려면 . 이 문제는 min-width: 992px 때문에 bclass이 적용되는 Ipad 가로 모드에서 발생하지만 aclass을 여기에 적용하려고합니다. 이 문제를 어떻게 해결합니까?

출처

2017-09-14 Priyatam Roy

max-height/min-height 및/또는 max-device-height/min-device-height을 미디어 쿼리에 사용하고 기존 쿼리와 결합 할 수도 있습니다.

출처

2017-09-14 10:45:46 Johannes

에 대해 동일하게 작동합니다. ipad (가로 모드)와 바탕 화면 (예 : 768px)의 장치 높이가 동일합니다. 구별 할 수 없다. –

여기에 또 다른 대답이 있지만 여전히 적용되는지는 확실하지 않습니다. https://stackoverflow.com/a/9504571/5641669 – Johannes

and (orientation: landscape)을 사용해 보셨습니까? 이것은 장치가 가로 모드 인 경우에만 CSS에 규칙을 적용하는 미디어 쿼리 제약 조건입니다. orientation: portrait

출처

2017-09-14 10:46:42 Ryan

예, 시도했습니다. 하지만 bclass가 적용되는 것을 멈추지는 않습니다. –

그런 다음 @Johannes의 해결책을 시도하고'min-device-height'와'max-device-height'를 사용하십시오. 그들이 일할 때까지 결합하십시오. – Ryan

기기 높이는 ipad와 데스크톱 모두 동일합니다 (예 : 768px). 구별 할 수 없다. –

답변

관련 문제