有没有一种方法可以支持CSS中的浏览器检测和媒体查询？

Question

我试图同时为IE 11和IE Edge浏览器检测以及浏览器宽度媒体查询编写CSS。

通过Chrome的常规媒体查询，我实现了元素宽度，没有任何问题。

但是，如果浏览器为IE11，宽度为1360px，则我要应用红色，元素宽度应为800px（绿色背景），如果浏览器宽度为1920px，则元素宽度应为1200px（红色背景）

如果浏览器为Edge且宽度为1360px，则我要应用红色，并且元素宽度应为900px，绿色背景，如果浏览器宽度为1920px，则元素宽度应为1300px，红色背景。

这不会打扰我的常规类，这些类在Chrome和Firefox上正常运行。

下面是我试图用来实现期望结果的两个类，但是没有做到o：

Chrome的常规媒体查询

@media only screen and (max-width: 1920px) {
    .test-class {
        width: 100%;
        background-color: red;
    }
}

@media only screen and (max-width: 1360px) {
    .test-class {
        width: 80%;
        background-color: green;
    }
}

对于IE：

@media only screen and (max-width: 1920px) {
    .test-class {
        width: 1200px;
        background-color: red;
    }
}

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
    .test-class {
        width: 1200px;
        background-color: red;
    }
}

@media only screen and (max-width: 1360px) {
    .test-class {
        width: 800px;
        background-color: green;
    }
}

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
    .test-class {
        width: 800px;
        background-color: green;
    }
}

对于MS Edge

@media screen and (max-width: 1920px) {
    @supports (-ms-ime-align: auto) {
        .test-class {
            width: 1200px;
            background-color: red;
        }
    }
}

@media screen and (max-width: 1360px) {
    @supports (-ms-ime-align: auto) {
        .test-class {
            width: 800px;
            background-color: green;
        }
    }
}

当我如上所述编写CSS时，所有元素在1920px宽度的浏览器中占100％，在1360px浏览器中占80％。