iPad 용 CSS 속성 만 덮어 쓰려면 어떻게해야합니까?

Question

CODE : 기본적으로

.container { 
     width: 960px; 
     max-width: 100%; 
     min-width: 960px; 
     height: 500px; 
     background-color: #fff; 
     border: 1px solid #000; 
} 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
.container { 
     width: 960px; 
     max-width: 100%; 
     height: 500px; 
     background-color: #fff; 
     border: 1px solid #000; 
} 

컨테이너가 960의 최소 폭을 가지고 있지만 내가 반응 디자인을 사용하고 있는데 아이 패드가 960 폭보다 smalelr입니다. 위의 코드를 사용하면 iPad라고 생각하면 분당 960 픽셀이 아닌 픽업이됩니다. 하지만 그것은.

최소 너비가 ipad가 아닌 CSS에만 표시되고 ipad CSS에서는 최소 너비가되지 않도록하려면 어떻게해야합니까?

Answer 1

그냥 미디어 쿼리에 min-width: 0 (또는 704px 필요한 경우) 추가 : 미디어 쿼리의

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
.container { 
     min-width: 0; 
    } 
} 

생각해 당신의 일반적인 스타일의 CSS 선언이 모든 선언을 다시 작성하지 않는, 오버라이드 (override) 할 필요가로 .

Answer 2

당신이 시도 할 수 :

@media screen and (min-width: 961px) { 
    .container{ 
     min-height: 960px; 
    } 
} 

그것은 단지 이상 960 픽셀 (폭)와 장치의 최소 높이 규칙을 aply 것입니다. iPad 해상도 이하에는 영향을 미치지 않습니다.

!을 (를) 덮어 쓸 수도 있지만 중요한 것은이지만 권장하지 않습니다.