Как переписать свойство CSS только для iPad?

Question

КОД:

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

По умолчанию контейнер имеет мин-ширина 960px, но я использую адаптивный дизайн и Ipad является smalelr чем 960px ширины. Используя вышеприведенный код, я подумал, что если это iPad, он не получит минимальную ширину: 960px; но это.

Что я могу сделать, чтобы минимальная ширина отображалась только на не-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; 
    } 
} 

Think запросов СМИ, как CSS декларации вашей общей таблицы стилей вам нужно переопределить, не переписывают все объявления ,

Answer 2

Вы можете попробовать:

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

Это APLY правило мин высоты только для устройств с более чем 960 пикселей (ширина). Не влияет на разрешение iPad или ниже.

Или вы можете переписать ! Important - но имейте в виду, что это не рекомендуется.