Есть ли способ, которым мы можем объединить обнаружение браузера и медиазапросы в CSS? - PullRequest
Новая
       36

Есть ли способ, которым мы можем объединить обнаружение браузера и медиазапросы в CSS?

0 голосов
/ 01 апреля 2019

Я пытаюсь написать CSS для IE 11 и IE Edge, обнаружение браузера и медиазапросы ширины браузера.

С помощью обычного медиазапроса для Chrome я достигаю ширину элемента без каких-либо проблем.

Но, если браузер IE11 и ширина 1360px, то я хочу применить красный цвет и ширина элемента должна быть 800px с зеленым фоном, а если ширина браузера 1920px, то ширина элемента должна быть 1200px с красным фоном.

Если браузер имеет Edge и ширина 1360px, я хочу применить красный цвет, и ширина элемента должна быть 900px с зеленым фоном, а если ширина браузера равна 1920px, ширина элемента должна быть 1300px с краснымbackground.

И это не должно мешать моим обычным занятиям, которые работают без сбоев для Chrome и Firefox.

Ниже приведены два класса, которые я пытался использовать для достижения желаемого результата, но которые провалилисьна дос о:

Обычный медиа-запрос для 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, как указано выше, всеэлементы принимают 100% для браузера шириной 1920px и 80% ширины для браузера 1360px.

...