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

Posted 2023-03-06

【中文标题】关于 max-width 属性的 CSS 媒体查询为平板电脑和桌面设置 1024px 大小

【英文标题】：CSS Media Queries regarding max-width property to make 1024px size for Tablet and Desktop

【发布时间】：2017-06-17 19:50:13

【问题描述】：

我仍在试图弄清楚媒体查询是如何工作的。我有两个媒体查询，一个针对 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%;
          
       

【参考方案1】：

检查Media Queries for Standard Devices。可能有用

【讨论】：

请访问：Are answers that just contain links elsewhere really “good answers”?

【参考方案2】：

这组媒体查询适用于“平板电脑”

移动

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)  ... 

【参考方案3】：

我建议您在现有查询中使用此媒体查询，以确保其设备具有视网膜分辨率

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1)  /* Retina-specific stuff here */