媒体查询的响应性问题答案

【问题标题】：Responsiveness issue with media query媒体查询的响应性问题
【发布时间】：2021-01-05 02:28:42
【问题描述】：

我正在努力使我的 html 响应能力，我想在编写代码时在 iPhoneX(width: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。

如何做到这一点？

【问题讨论】：

尝试使用 480 像素，因为最小的低预算平板电脑从 481 像素开始，或者您可以选择 376 像素。保留 1 px 范围总是更好，但使用 480 你应该覆盖所有智能手机，而不仅仅是一部 iphone
或者看看这个模板：gist.github.com/gokulkrishh/242e68d1ee94ad05f488
我尝试到 979px 但没有用
stackoverflow.com/questions/46313640/… 也许对你有帮助

标签： html css media-queries media

【解决方案1】：

您可能可以更好地解决这个问题，但稍微改变一下您的断点，除非您必须这样做，否则不要专注于特定的手机型号。

将 375 像素移动到 450 像素左右，然后将 980 像素降低到 750 像素左右。

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

比如……

.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
  }
}

等等……

【讨论】：

正如我上面提到的，我希望低 375 aur，设备效果不大于 375
按照这个逻辑，将您的“375 或更低”设备作为默认样式，然后在第一个最小宽度查询中的所需点覆盖它们（首先是移动设备）:)

【解决方案2】：

查看 Google 为其 Material Design 使用的推荐断点： Responsive grid layouts - Breakpoints.

还将only screen 添加到您的媒体查询中，例如

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

并在您的 HTML <head> 中添加以下行：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：