媒體查詢最小寬度不起作用

我有兩個媒體查詢。媒體查詢最小寬度不起作用

@media (min-width: 1300px) { 
    .container { 
     width: auto; 
     max-width: 1360px; 
    } 
} 
@media (min-width: 1565px) { 
    .container { 
     width: auto; 
     max-width: 1576px; 
    } 
}

無論寬度是多少。該容器始終作爲第一個媒體查詢。我的意思是當身體的寬度是1570px的容器寬度仍然是1360px！

來源

2016-07-20 Kareem Abdelwahed

使用max-width：1576px！important; –

僅顛倒@media查詢順序。

@media (min-width: 1565px) { 
    .container { 
     width: auto; 
     max-width: 1576px; 
    } 
} 

@media (min-width: 1300px) { 
    .container { 
     width: auto; 
     max-width: 1360px; 
    } 
}

來源

2016-07-20 10:38:40

同樣的問題。容器總是1576px - 因爲它是第一個媒體查詢 - 即使身體是1500px例如。 –

可以分享你的鏈接嗎？ –

它是本地頁面。我的鏈接是什麼意思？ –

你可以嘗試這樣的事情：

@media only screen and (min-width:1300px) and (max-width: 1565px) { 
    .container { 
     width: auto; 
     max-width: 1360px; 
    } 
} 

@media only screen and (min-width:1565px) { 
    .container { 
     width: auto; 
     max-width: 1576px; 
    } 
}

來源

2016-07-20 10:43:08 krozaine

不起作用。當我把身體寬度1550px。容器是1576px！ –

@kroaine你的（max-width：1565px）需要比你的（min-width：1565px）更小的像素So（max-width：1564px）（min-width：1565px） –

即使如此，最大寬度和最小寬度它工作正常，我認爲問題是另一個 – blonfu

我相信還有其他的方式來實現你在找什麼。我不建議你像這樣堆疊最小寬度的查詢，而是設計你的網站以某種方式行爲，而不管最小寬度如何，並且只使用最小寬度的較小屏幕的媒體查詢。

來源

2016-07-20 10:43:32

嘗試......

@media only screen and (min-width:1300px) and (max-width: 1564px) { 
    .container { 
     max-width: 1360px; 
     width: 100%; 
    } 
} 

@media only screen and (min-width:1565px) { 
    .container { 
     max-width: 1576px; 
     width: 100%; 

    } 
}

來源

2016-07-20 11:04:59

設置在HTML <head>的viewport是很重要的。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

來源

2017-06-06 05:46:56 fotijr

媒體查詢最小寬度不起作用

回答

相關問題