响应CSS为2k结果屏幕和4k结果屏幕和8k分辨率

Question

我正在使用13英寸2k和4k分辨率笔记本电脑(惠普精英图书)。我需要写css，如果它是2k分辨率(正常分辨率)身体背景颜色，使其黑色，如果它是4k分辨率体，使它红色。如何编写css基于屏幕分辨率的。使用javascript window.innerWidth对2k和4k结果是相同的(1536)

Answer 1

使用@media规则。

您可以查看这里的示例：mediaquery.asp

Answer 2

在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网站上找到一些关于使用媒体查询的优秀文档。