html - 使用 Chrome Devtools，我的分辨率为 @ 1680px，但最小宽度为 :1440px media query is not working

Question

所以我的客户屏幕是 @1680px，但是屏幕是 1200px，所以我必须使用 Chrome 的 Devtools 来模拟更大的屏幕。我在我的 css 文件中创建了一个媒体查询:

@media (min-width: 1440px)

但是当我在 Devtools 中将分辨率设置为 1680px 时，Chrome 正在使用较小的查询:

@media (min-width: 1200px)

我不知道它是 Devtools、Chrome 还是我做的。我正在处理的页面是 http://www.becoming1percent.com/到目前为止，我只有一个较大的媒体查询部分是“The Entrepreneurs Monthly Book Box”部分，以及它所在的 div(类是 .hero-content)。请帮忙!

Answer 1

这取决于您如何订购您的查询。我看到你的代码是

@media (min-width: 1440px) {
    #index-hero .hero-content {
        margin: -300px auto 15px;
    }
}


@media (min-width: 1200px) {
    #index-hero .hero-content {
        margin: -60px auto 15px;
        /*text-align: left;*/
        width: 50%;
    }

    #index-hero {
    min-height: 900px;
    margin-top: -50px;
    }
}

基本上浏览器会先应用@media (min-width: 1440px) 然后用@media (min-width: 1200px) 中定义的样式覆盖它。

min-width 通常用于移动设备优先的方法，因此所有内容都会从较小的屏幕变为较大的屏幕，例如移动设备 -> 平板电脑(min-width: 480px) -> 普通桌面 (min-width: 768px) -> 大屏幕 (min-width: 1024px)

所以我建议您重新排序样式表，将 1440 像素降低到 1200 像素以下。

或者你可以定义最大宽度来进行深度控制。

 @media (min-width: 1440px) {
    #index-hero .hero-content {
        margin: -300px auto 15px;
    }
}


@media (min-width: 1200px) and (max-width: 1439px) {
    #index-hero .hero-content {
        margin: -60px auto 15px;
        /*text-align: left;*/
        width: 50%;
    }

    #index-hero {
    min-height: 900px;
    margin-top: -50px;
    }
}