Question

我创建了一个网站来测试媒体查询，并在我的样式表中包含以下内容：

@media(max-width:4096px){...}
@media(max-width:1920px){...}    
@media(max-width:1440px){...}
@media(max-width:1366px){...}
@media(max-width:1136px){...}
@media(max-width:1080px){...}
@media(max-width:1024px){...}
@media(max-width:980px){...}
@media(max-width:960px){...}
@media(max-width:768px){...}
@media(max-width:720px){...}
@media(max-width:640px){...}
@media(max-width:320px){...}

问题是每当我使用Firefox响应式设计工具时，我会扩展到不同的分辨率（例如1366px）。它不会加载1366px样式，而是从1440px加载样式。

对于不仅1366px的所有查询都会发生这种情况。但是，当我在Chrome上试用它时，我没有遇到这个问题。我使用Chrome 36和Firefox 30，所以我不认为该版本存在问题。

有没有让我的网站重新调整大小没有这个问题，为什么会出现这个问题？感谢。

Answer 1

因为您需要包含min-width示例;

@media(max-width:1440px) AND (min-width:1367px){...}
@media(max-width:1366px) AND (min-width:1137px){...}

这有助于消除冲突。

媒体查询不符合正确的样式表

1 个答案: