Question

@media (max-width: 1200px) {@supports (-ms-ime-align:auto){.selector {max-width: 25rem;}}

以上代码无法正常工作。

Answer 1

如果您希望将.selector的div类作为目标，则使用Microsoft Edge浏览器在1200px 和以下时，这就是您想要的。您错过了一个结束括号。

@media (max-width: 1200px) {
  @supports (-ms-ime-align: auto) {
    .selector {
      max-width: 25rem;
    }
  }
}

DEMO

Answer 2

Marc的上述代码有效。但是，如果您在同一CSS上激活了多个屏幕分辨率查询之一，则

@media (min-width: 1281px) and (max-width: 1600px) {
#exampletextareatotest{color:#ff0000;}
}

Edge将使其完全覆盖Marc的查询。

通过将以下css行示例之一添加到多屏幕分辨率/特定于Edge的媒体查询中，您将能够同时管理多个屏幕查询和Edge。

@supports (-ms-ime-align: auto) {#exampletextareatotest{color:#00ff00;}

完整示例：

@media (min-width: 1281px) and (max-width: 1600px) {
.screenresexampleNOTrequiredbyEdge{.seekbar:width:200px;}
@supports (-ms-ime-align: auto) {#textthatneedstobedifferentoncertainscreenresolutionsaswellasjustedge{color:#00ff00;}
}

希望对某人有帮助！

带有Edge CSS hack的媒体查询

2 个答案: