Css IE11@带宽度的介质

对于IE11，我使用以下@media查询：

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

这很好用

但现在我想为手机、平板电脑和台式机提供3种不同的产品。我尝试了以下方法：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (min-width : 1200px) {
    max-width: 83%;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (min-width : 768px) and (max-width: 1199px) {
    max-width: 90%;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (max-width : 767px) {
    max-width: 100%;
}

---

但它总是降落在最后一个，最大宽度为100%。我试着把宽度放在-ms高对比度之前，但它似乎有同样的效果。关于解决这个问题有什么建议吗？

认为你在寻找类似的东西

// Extra small devices (portrait phones, less than 576px)
@media screen and (-ms-high-contrast: active), 
                  (-ms-high-contrast: none) 
              and (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media screen and (-ms-high-contrast: active), 
                  (-ms-high-contrast: none) 
              and (min-width: 576px) 
              and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media screen and (-ms-high-contrast: active), 
                  (-ms-high-contrast: none) 
              and (min-width: 768px)
              and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media screen and (-ms-high-contrast: active), 
                  (-ms-high-contrast: none) 
              and (min-width: 992px)
              and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media screen and (-ms-high-contrast: active), 
                  (-ms-high-contrast: none) 
              and (min-width: 1200px) { ... }