合并媒体查询[重复]答案

【问题标题】：Combine media queries [duplicate]合并媒体查询[重复]
【发布时间】：2021-05-26 05:45:41
【问题描述】：

我有取决于设备 I.E 的媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) {
  //iphone x
  ...some css
 }

@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  //iphone 6,7,8
    ... same css as iPhone x
  }

@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
  //iphone 6/7/8 plus
... same css again
}

etc..

如您所见，由于某种原因我无法合并媒体查询，我多次重复代码，我尝试了：

@media only screen and (device-width: 375px) and (device-height: 812px) and (device-width: 375px) and (device-height: 667px) {
  ...some css
 }

将 iPhone X 与 iPhone 6、7、8 查询结合使用，但不适用于 iPhone 6、7、8。如果我使用相同的 CSS 规则，是否可以合并所有这些规则？问候

【问题讨论】：

@media only screen and (device-width: 375px and device-height: 812px and device-width: 375px and device-height: 667px) {
使用逗号将多个媒体查询组合成一条规则

标签： css

【解决方案1】：

使用逗号将多个media queries 组合成一个规则。

这里是MDN's definition of the , (comma) in media queries：

逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为类似于逻辑或运算符。

例如

@media screen and (max-width: 375px)
  , screen and (max-width: 414px)
{
   /* some css here */
}

另外，device-width/device-height are deprecated。考虑改用width/height，如上例所示。

【讨论】：