移动媒体查询-纵向vs横向

Question

我正在使用媒体查询来解决手机屏幕问题。

我面临的问题是标题上的文本与纵向景观与．景观顶部";属性取代了纵向属性。意义;为了正确地定位横向文本，在肖像上它被定位得太高了!知道这个的解是什么吗?如何使人像和风景画互相尊重，互不超越?

或者你如何处理它?

/* Mobile Portrait */
@Media only screen and (max-width: 480px) {
#one{
position: relative;
top: 310px;
}
}
/* Mobile Landscape */
@Media only screen and (max-width: 734px) {
#one{
position: relative;
top: 230px;
}
}

Answer 1

我认为你需要颠倒顺序，因为<480也是<784，它遵循的是顺序中最后一个的规则。尝试使用这个，我通常将媒体查询按从大到小的顺序排列。

/* Mobile Landscape */
@Media only screen and (max-width: 734px) {
#one{
position: relative;
top: 230px;
}
}
/* Mobile Portrait */
@Media only screen and (max-width: 480px) {
#one{
position: relative;
top: 310px;
}
}