CSS媒体查询顺序问题

Question

我正在更新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应该在上方。 任何帮助，将不胜感激，谢谢！

Answer 1

我建议使用最小宽度而不是最大宽度。 这将确保不会加载992px样式或将其显示在您的移动视图中。 它还将更好地满足“移动优先”的要求，因为您只为移动设备加载了移动样式，然后仅在视口增长到平板计算机时才添加平板计算机样式，依此类推。 这也将解决您的问题。

#if70u {
    font-size: 20px;
}

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

通常，我很少使用max-width，并且经常在需要时使用它，这是因为我创建了某种糟糕的代码，后来在瀑布上产生了后果。

Answer 2

在这种情况下，您应该使用移动优先技术，主类上的声明适用于移动，然后将媒体查询增加到更大的设备，看看：

#if70u{
  font-size: 14px; //Its apply for mobile
}

@media screen and (min-width: 768px){
  #if70u{
    font-size: 16px; //Its apply for tablets
  }
}


@media screen and (min-width: 992px){
  #if70u{
    font-size: 18px; //Its apply for small desktop screens
  }
}


@media screen and (min-width: 1200px){
  #if70u{
    font-size: 20px; //Its apply for large desktop screens
  }
}

Answer 3

除了@S。 邓恩回答。

如果要将样式设置为特定的最小和最大宽度，可以使用以下方法：

@media only screen and (max-width: XXXpx) and (min-width: XXXpx)

因此，在您的情况下，它将是：

#if70u {
    font-size: 20px;
}

@media only screen and (max-width: 992px) and (min-width: 481px) {
    #if70u {
        font-size: 40px;
    }
}