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

【问题标题】：CSS Mobile Navigation Changes for Portrait and Landscape纵向和横向的 CSS 移动导航更改
【发布时间】：2015-10-31 03:12:07
【问题描述】：

我的网站上有一系列包含“.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 工作有想法吗？

提前致谢，

千伏

【问题讨论】：

在#2 中，您使用的是(orientation:landscape)，您不是说在纵向模式下您会喜欢这个吗？将横向更改为纵向
啊，我太愚蠢了。你是对的，对不起，我仍然开始使用 CSS。问题是，如果我在第一行插入 (orientation:portrait)，#main-header 将从纵向模式中删除。我试图避免这种情况。总结一下-对于纵向模式，我想保留#main-header，并将填充顶部添加到.iframe1。对于横向，我想删除#main-header...感谢所有 cmets 和建议。

标签： css class mobile orientation

【解决方案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 将其保持在纵向模式。

千伏

【讨论】：