ipad - 如何仅覆盖 iPad 的 CSS 属性？

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

默认情况下，容器的最小宽度为 960 像素，但我使用的是响应式设计，并且 ipad 比 960 像素的宽度更小。使用上面的代码，我认为如果是 iPad，它不会拾取 min-width: 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覆盖- 但请记住，不建议这样做。