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 工作吗？

提前致谢，

KV

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 使其保持纵向模式。

KV

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

CSS Mobile Navigation Changes for Portrait and Landscape

css

mobile

class

orientation