时间戳

首页 > 解决方案 > 用于 2k 分辨率屏幕和 4k 分辨率屏幕和 8k 分辨率的响应式 CSS

css - 用于 2k 分辨率屏幕和 4k 分辨率屏幕和 8k 分辨率的响应式 CSS

问题描述

我正在使用 13 英寸 2k 和 4k 分辨率笔记本电脑（HP Elite Book）。如果它是 2k 分辨率（正常分辨率）主体背景颜色，则我需要编写 css，使其变为黑色，如果它是 4k 分辨率，主体使其变为红色。如何根据屏幕分辨率编写css。window.innerWidth2k 和 4k 分辨率使用 javascript相同 (1536)

标签： cssscss-mixins

解决方案

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

推荐阅读