Question

我的网站上有一系列包含＆＃34; .iframe1＆＃34;的页面。 .iframe1需要在手机上以纵向和横向两种模式查看，但我需要调整两件事以使其正常运行。

1。）横向模式：阻止＆＃34; #main-header＆＃34;从完全出现。

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移动导航更改

1 个答案: