Question

我正在运行两个媒体查询，以便根据屏幕尺寸更改div（.contact-info）的填充和对齐方式：

@media only screen and (min-width: 1501px) and (max-width: 5000px) {
  .contact-info {
      padding-top: 198px !important;
      text-align: left !important;
  }
}

@media only screen and (min-width: 0px) and (max-width: 1500px) {
  .contact-info {
      padding-top: 0px !important;
      text-align: center !important;
  }
}

不幸的是，当与.contact-info div关联时，第一个@media似乎甚至不会激活。似乎只有第二个与.contact-info div相关联，因此整个事情最终变得脱节了。

我已附上图片以供参考。

Answer 1

您的代码可以正常工作！虽然按照上面的答案小心谨慎是一种有用的做法，但这不是造成此问题的原因，因为您指定了媒体查询并且它们是不同的。您的代码工作正常。我在这里尝试过：https://codepen.io/kdgyimah/details/GRZRpMm [https://codepen.io/kdgyimah/details/GRZRpMm][1]

当您达到指定的断点时，我改变了背景颜色，

确定要禁用浏览器中的缓存吗？在添加此代码之前，该页面可能正在加载旧版CSS的已保存缓存/版本。 取决于所使用的浏览器，解决方案可能有所不同，但在Chrome浏览器中：

选择右上角的“菜单”按钮，然后选择 “更多工具”>“开发人员工具”。您也可以通过以下方式转到此屏幕对于Windows和Linux，请按Ctrl + Shift + I；对于Mac OS X，请按Command + Option + I。
出现“开发工具”窗口。
选择“网络”，然后选中“禁用缓存”框。

如果您使用的是Firefox，请使用此选项禁用缓存：https://dzone.com/articles/how-turn-firefox-browser-cache

然后重新加载页面。这将加载CSS的最新版本或保存的版本。

如何解决奇怪的@media冲突？

1 个答案: