时间戳

首页 > 解决方案 > CSS媒体查询顺序问题

html - CSS媒体查询顺序问题

问题描述

我正在更新一个 ID 为 if7ou 的文本元素。问题是，如果用户先在移动视图上更新样式，然后在选项卡视图上更新样式，则媒体查询不适用于选项卡视图。如果我们首先更新桌面样式，第二个标签和第三个移动版，那么一切正常，但是如果我们首先反转步骤移动视图，第二个标签视图和第三个桌面视图，那么 css/媒体查询将不适用于标签和桌面视图。所以我想要任何选项，我们可以以任何顺序添加 css，首先是 480，其次是 992，反之亦然 css 应该基于设备大小而不是基于它们的顺序来应用。

@media (max-width: 480px) {
    #if70u {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #if70u {
        font-size: 40px;
    }
}

我认为这是由于 480 应该下降而 992 应该高于。任何帮助将不胜感激，谢谢！

标签： htmlcss

解决方案

我建议使用最小宽度而不是最大宽度。这将确保 992px 样式不会加载或出现在您的移动视图中。它也将更好地满足“移动优先”的要求，因为您只为移动加载移动样式，然后仅在平板的视口增长时添加平板样式，等等。这也将解决您的问题。

#if70u {
    font-size: 20px;
}

@media (min-width: 481px) {
    #if70u {
        font-size: 40px;
    }
}

一般来说，我很少使用 max-width ，而且通常，当我确实需要它时，这是因为我创建了某种糟糕的代码，这些代码后来在瀑布下产生了后果。

推荐阅读