时间戳

首页 > 解决方案 > 如何告诉浏览器使用哪些媒体查询？

html - 如何告诉浏览器使用哪些媒体查询？

问题描述

例如，假设我有：

@media(max-width:800px) {
    /* Some Code */
}
@media(max-width:500px) {
    /* Some Code */
}

浏览器随机选择其中之一，如果我在 800px 上查看，它可能会选择 800px css 或者它可能会选择 500px 代码。如果我在 500px 上查看，它可能会选择 800px css 或者它可能会选择 500px 代码。我注意到，即使我的屏幕尺寸为 500 像素或更小，它也更频繁地使用 800 像素。有时，它结合了 2。这是浏览器正在拾取的代码截图......在此处输入图像描述

注意它是如何在两个宽度上都增加的，但后来max-width:500px被划掉了？我的屏幕分辨率设置为 500 像素。我将不胜感激。谢谢你。

标签： htmlcssmedia-queries

解决方案

显然（从您的屏幕截图中可以清楚地看出）您的代码中媒体查询的顺序与您发布的不同，而是这样：

@media(max-width:500px) { /* rule for nav-item starts at line 26 */
    /* Some Code */
}
@media(max-width:800px) { /* rule for nav-item starts at line 38 */
    /* Some Code */
}

这是错误的顺序，因为 800px 查询将始终应用于之前应用于 500px 查询的所有内容并覆盖它。（顺序很重要）。

所以只需交换这些顺序 - 首先是 800 像素，然后是 500 像素 - 你就会全部设置好。

推荐阅读