Адаптивный CSS для экрана с разрешением 2k и экрана с разрешением 4k и разрешением 8k

Question

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

Answer 1

В своем 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 о Использование медиазапросов

Answer 2

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

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