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

默认情况下，容器的最小宽度为960px，但我使用的是响应式设计，而ipad比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;
  }
}

将媒体查询视为您需要覆盖的常规样式表的CSS声明，不要重写所有声明。

Answer 2

您可以尝试：

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

仅适用于超过960像素（宽度）的设备的最小高度规则。不影响iPad分辨率或以下。

或者你可以用！important 覆盖 - 但请记住，不建议这样做。

如何仅覆盖iPad的CSS属性？

2 个答案: