css - 带有边缘 css hack 的媒体查询

Question

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

上面的代码没有像我预期的那样工作。

Answer 1

如果您希望定位 div 类.selector，当低于 1200 像素并使用 Microsoft Edge 浏览器时，这就是您想要的。你错过了一个右括号。

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

演示

Answer 2

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

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

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

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

@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;}
}

希望对某人有所帮助！