使用Chrome Devtools，我的分辨率為1680px，但是最小寬度：1440px的媒體查詢不起作用

Question

因此，我的客戶屏幕為@ 1680px，但屏幕為1200px，所以我必須使用Chrome的Devtools來模擬更大的屏幕。 我在css文件中創建了一個媒體查詢：

@media (min-width: 1440px)

但是當我在Devtools中將分辨率設置為1680px時，Chrome正在使用較小的查詢：

@media (min-width: 1200px)

我不知道它的Devtools還是Chrome，或者我做了什么。 我正在處理的頁面是http://www.becoming1percent.com/ ，到目前為止，我在較大的媒體查詢中擁有的唯一部分是“企業家月刊框”部分，其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 ）

因此，我建議您重新排序樣式表，將1440px降到1200px以下。

或者，您可以定義最大寬度以進行深度控制。

 @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;
    }
}

Answer 2

在以下位置獲取可移植的Firefox：

http://portableapps.com/apps/internet/firefox_portable

然后使用CTRL + Shift + M獲取移動仿真器。

比鉻合金好得多。

chrome chrome會受到插件的影響，並且是越野車，全新安裝的Firefox可以100％工作，並且實時調整大小的速度非常快，非常適合展示給客戶