Question

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

npm run dev

我认为这是由于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;
    }
}

CSS媒体查询顺序问题

3 个答案: