媒体查询没有被触发

Question

我是 Web 开发的新手，我在处理媒体查询时遇到了困难。

我正在创建一个舞蹈网站，但我在“media-query.css”中的以下媒体查询没有被触发。

@media screen and (max-width:1800px)  and (min-width: 399x) {
  .our-services ul li {
    font-size: 2rem;
    padding: 2rem;

  }
}

@media screen and (max-width: 400px) {
  .our-services ul li{
    font-size: 2rem;
    padding-left: 0rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

项目链接：https://github.com/abhinav700/DanceMasti.com

Answer 1

懒得浏览所有这些文件，所以我将在此处列出一些常见错误，以防其他人发现此问题并有不同的原因：

• 可能您尚未链接该文件。将<link src="your-directory/media-query.css"></link> 添加到您的 html 文件中。
• 您的查询被具有更高优先级的文件覆盖。测试这个 在您的台词之后留下 !important，即width: 50px !important;。注意 一些人认为使用重要的代码是错误的代码（我对此没有意见，并且 不知道是不是真的）。​​
• 正如另一位用户所发布的，您的媒体查询有点不对劲，所以您可能会踮脚 这条线并使用正好 400px。不过我对此表示怀疑。较低的查询应该是 优先，所以它仍然应该看起来像一个移动视图。
• 检查以确保您正确使用了选择器。你的选择器 目前正在寻找 <li> 在 <ul> 内的任何元素内 our-services的类（如果我错了，请有人纠正我）。我喜欢的方式 检查这只是为了设置一个子句：

li{
  position: none;
}

看看这个元素是否消失了。如果确实如此，并且没有其他任何弹出...我什么都没有。 如果此答案有帮助，请将其标记为答案。

Answer 2

它说的是 399 倍而不是 401 像素。所以这可能是语法问题和重叠问题。