Адаптивный CSS для экрана с разрешением 2k и экрана с разрешением 4k и разрешением 8k - PullRequest
1 голос
/ 30 октября 2019

Я использую 13-дюймовый ноутбук с разрешением 2K и 4K (HP Elite Book). Мне нужно написать css, если это цвет фона тела с разрешением 2k (нормальное разрешение), сделать его черным, а если тело с разрешением 4k, сделать его красным. Как написать CSS на основе разрешения экрана . Использование javascript window.innerWidth одинаково для 2K и 4K (1536)

Ответы [ 2 ]

0 голосов
/ 30 октября 2019

В своем CSS-файле вы можете указать диапазон разрешений для применения правил:

body {
    background: red;
    @media screen and (min-width: 4001px) {
        background: yellow;
    }
    @media screen and (min-width: 2501px) and (max-width: 4000px) {
        background: green;
    }
    @media screen and (min-width: 1600px) and (max-width: 2500px) {
        background: blue;
    }
    @media screen and (max-width: 1599px) {
        background: purple;
    }
}

Вы можете найти отличную документацию о них на веб-сайте MDN о Использование медиазапросов

0 голосов
/ 30 октября 2019

Используйте правило @media.

Вы можете посмотреть пример здесь: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

...