Question

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

@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。

该怎么做？

Answer 1

查看其Material Design使用的Google建议的断点： 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">

Answer 2

您可能可以更好地解决此问题，但除非有必要，否则请稍微改变断点，而不是专注于特定的手机型号。

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

以此类推...

媒体查询的响应性问题

2 个答案: