0

我最近遇到了一个使用多个媒体查询的 CSS 文件。每个媒体查询内部都有相同的样式规则。

我基本上想知道我是否可以安全地将这 6 个元查询简化为 2 个，并获得相同的效果。

根据我对 -webkit-min-device-pixel-ratio 的了解，我不确定为什么在这里使用它。为什么有人会根据设备的像素比率或分辨率而不是标准的“格式化像素”来定位设备？

/* iPhone X Portrait */
    @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
    /* portrait rules */
    }
    /* 6+ Portrait */
    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
    /* portrait rules */
    }
    /* 6 Portrait */
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    /* portrait rules */
    }
    /* iPhone X Landscape */
    @media screen and (max-device-width: 767px),
      (max-device-height: 375px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
    /* landscape rules */
    }
    /* 6+ Landscape */
    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
    /* landscape rules */
    }
    /* 6 Landscape */
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    /* landscape rules */
    }

简化：

/* Phone Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: portrait) {

}
/* Phone Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {

}
4

0 回答 0