时间戳

首页 > 解决方案 > 合并媒体查询

css - 合并媒体查询

问题描述

我有取决于设备 IE 的媒体查询

@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 规则，是否可以合并所有这些规则？问候

标签： css

解决方案

使用逗号将多个媒体查询组合成一个规则。

这是MDN 对,媒体查询中 (comma)的定义：

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

例如

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

此外，device-width/device-height已弃用。考虑使用width/height代替，如上例所示。

推荐阅读