如何解决媒体查询的响应性问题
我正在努力提高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。
该怎么做？
解决方法
查看其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">
您可能可以更好地解决此问题，但除非有必要，否则请稍微改变断点，而不是专注于特定的手机型号。
将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
}
}
以此类推...
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
