Html 媒体查询的响应问题

我正在努力提高我的html响应能力，当我编写代码时，我想在IPhoneX（宽度：375px）上做一些事情：

@media(max-width:375px){
.news-posts-page .news-posts-section .elementor-posts{display: block;}
}

这不适用于IPhoneX。但当我写这篇文章时：

@media(max-width:980px){
    .news-posts-page .news-posts-section .elementor-posts{display: block;}
    }

它在IPhoneX上运行良好，但这里有一个问题。这给Ipad带来了我不想要的问题。我希望此代码仅适用于IPhoneX

---

如何做到这一点？

查看谷歌推荐的材料设计使用的断点：

还可以将

仅屏幕

添加到您的媒体查询中，例如

@media only screen and (max-width: 577px ) {
}

并在HTML中添加以下行：

---

您可能可以更好地实现这一点，但要稍微改变断点，不要将重点放在特定的手机型号上，除非您必须这样做

将375px移动到450px左右，然后将980px减少到750px左右

就个人而言，我更喜欢使用最小宽度查询，而不是尝试使用最大宽度撤消更改

所以有点像

.class {
  // Mobile or narrowest styles
}
@media screen and (min-width:450px){
  .class {
    // Bigger than mobile phone styles
  }
}
@media screen and (min-width:750px){
  .class {
    // Bigger than tablet styles
  }
}

---

等等……

试试480px，因为最小的低成本平板电脑起价是481px，或者你可以选择376px。离开1像素范围总是更好的，但480应该覆盖所有智能手机，而不仅仅是一部iPhone，或者看看这个模板：我一直尝试到979px，但没有用，也许这可以帮助你，正如我上面提到的，我希望375 aur更低，设备效果不大于375。按照这个逻辑，把你的“375或更低”将设备作为默认样式，然后在第一个最小宽度查询中的所需点处覆盖它们（首先是la mobile）：）