时间戳

首页 > 解决方案 > 即只有最小宽度的样式

css - 即只有最小宽度的样式

问题描述

我如何将 ie only 媒体查询与最小宽度媒体查询结合起来（我读到 IE 是唯一不支持嵌套媒体查询的浏览器） - 因为我使用

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

所以我想我能做到

@media screen and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

但这仍然在下面应用1024px。如何结合最小宽度和 ie 媒体查询，使其仅适用于 ie 中的 1024px 以上？

（我打算制作一个片段，但它们无论如何都不能在 ie 中工作，所以如果您需要更多信息，请告诉我，但上面的代码足以复制我的问题）

标签： cssmedia-queries

解决方案

您使用了一个逗号，它的作用类似于or

@media screen and (-ms-high-contrast: active), 
                  (-ms-high-contrast: none) {}

所以当媒体查询被触发时

@media screen and (-ms-high-contrast: active)

或者

(-ms-high-contrast: none)

如果要添加另一个条件，则需要添加两次

@media screen and (min-width: 1024px) and (-ms-high-contrast: active), 
       screen and (min-width: 1024px) and (-ms-high-contrast: none) {}

（不确定您是否还需要检查screen两次，我在下面的@04FS 评论之后包含了）

推荐阅读