android - 关于 max-width 属性的 CSS 媒体查询使平板电脑和桌面的大小为 1024px

Question

我仍在努力弄清楚媒体查询是如何工作的。我有两个媒体查询，一个针对 ma​​x-width: 1024px，另一个针对平板电脑的 ma​​x-device-width: 1024px。

我面临的问题是，当我在我的 iPAD 上测试它时，它会跳过 ma​​x-device-width: 1024px 并选择 ma​​x-width: 1024px .

我的问题是如何为台式机和平板电脑编写最大宽度 1024px 的媒体查询？

我想要一个宽度为 1024 的台式机和平板电脑的原因是因为我需要不同的样式。

我的 CSS 代码如下。

  @media screen and (max-device-width: 1024px) and (orientation: portrait)
        {#cast1, #cast2, #cast3, #cast4, #cast5, #cast6, #cast7 
          {
            height: 26%;left: 5%;
          }
       } 

  @media screen and (max-width: 1024px)
       {#cast1, #cast2, #cast3, #cast4, #cast5, #cast6, #cast7 
          {
            height: 45%;left: 5%;
          }
       }

Answer 1

这套媒体查询适用于“平板电脑和桌面电脑”

移动

only screen and (min-width: 480px) { ... }

平板电脑

only screen and (min-width: 480px) { ... }
only screen and (min-width:321px) and (max-width:768px) { ... }
only screen and (min-width: 768px)  { ... }

桌面

only screen and (min-width: 992px) { ... }

巨大

only screen and (min-width: 1280px) { ... }