媒體查詢（最大寬度）在firefox中無法正常工作

我遇到最大寬度媒體查詢問題。在這個如果我使用該媒體查詢：媒體查詢（最大寬度）在firefox中無法正常工作

@media only screen and (min-width: 320px) and (max-width: 480px) { 
}

然後它不工作在480px分辨率。但如果我使用該媒體查詢：

@media only screen and (min-width: 320px) and (max-width: 640px) { 
}

它的工作與480px分辨率，但不能在640px工作。它的工作與Chrome很好。

我看到下面的鏈接也。但不成功。

Media queries not work in firefox

mediaqueries max-width not working in firefox

Media queries not working on firefox

我的meta標籤是：

<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

請幫助。

來源

2017-03-29 Kashish Agarwal

被這個和那個弄糊塗了。如何將查詢重新定義爲查詢1和查詢2？ – Sagar

你可能有另一個媒體查詢有'min-width：480px'嗎？這可能會覆蓋第一個正好在480px – Johannes

你可以分享你的代碼'小提琴'或'codepen' –

使用

@media only screen and (min-width: 320px) and (max-width: 480px) {

}

意味着，當屏幕寬度變得能想到480px更改，並恢復到正常時，屏幕寬度到達320px

真的不知道你是什麼想但上面的解釋應該可以幫到你

來源

2017-03-29 13:19:56

我已經使用這個，但不適用於480px分辨率。如果我使用（最大寬度：640px），那麼它可以在480px分辨率下工作，但不能在640px分辨率下工作。 –

你想讓它顯示在「320px」和「480px」之間的屏幕尺寸 –

它應該在任何b rowser。

<!DOCTYPE html> 
<html> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' /> 
    <body> 
     <div class="change">Some content</div> 
    </body> 
</html> 

.change{ 
    background: #f00; 
    align-items: center; 
    font-family: sans-serif; 
    color: #fff; 
    height: 100px; 
    display: flex; 
    justify-content: center; 
} 
@media only screen and (min-width: 320px) and (max-width: 640px) { 
    .change{ 
    background: #0f0; 
    color: #00f; 
    } 
}

這裏是一個JS小提琴的例子，改變媒體查詢的寬度，它應該仍然工作。

https://jsfiddle.net/rachit5/xm2tnx53/

注意，當輸出呈現在iframe內，媒體查詢將尋找iFrame的寬度而不是原來的頁面。

來源

2018-01-06 12:20:29 rach8garg

媒體查詢（最大寬度）在firefox中無法正常工作

回答

相關問題