纵向和横向的 CSS 移动导航更改

Question

我的网站上有一系列包含“.iframe1”的页面。 .iframe1 需要在手机的纵向和横向模式下都可见，但我需要调整 2 项以使其正常运行。

1.) 横向模式:完全阻止“#main-header”出现。

2.) 纵向模式:填充我的内容区域的顶部。 (#main-header 在纵向时覆盖了我的内容的顶部。)

我已经完成了#1，但似乎无法弄清楚如何实现#2。我将它们合并为一个任务，因为我觉得如果单独编写它们可能会发生冲突。

以下两个条目都达到了#1 但没有达到#2:

@media only screen and ( min-width: 480px ) and ( max-width: 768px ) {
#main-header {
display: none !important;
}
.iframe1 {
padding-top: 30px !important;
}
}

---

@media only screen and (orientation:landscape) and (max-width: 768px) {
#main-header {
display: none !important;
}
.iframe1 {
padding-top: 30px !important;
}
}

有人知道如何让#2 工作吗？

提前致谢

千伏

Answer 1

好的，所以我最终通过消除 orientation: 属性并简单地使用 min-width 和 max-width 实现了预期的效果>:

@media only screen and ( min-width: 481px ) and ( max-width: 768px ) {
#main-header {
display: none !important;
}
.iframe1 {
padding-top: 30px !important;
}
}

@media only screen and ( max-width: 480px ) {
.iframe1 {
padding-top: 119px !important;
}
}

这样我就能够从横向完全消除 #main-header，并使用适当的 padding-top 将其保持在纵向模式。

千伏