媒体查询（最大宽度）在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中无法正常工作

回答

相关问题