@媒体查询手机-肖像与景观

Question

我正在使用媒体查询来访问移动屏幕。

我面临的问题是与肖像与景观的标题上的文本。景观"top“属性取代了肖像画之一。意思:要正确地定位风景文字，就会在肖像上定位得太高！知道解决这个问题的办法吗？如何获得肖像和景观，以尊重彼此的财产，而不是超越对方？

或者你会怎么接近它？

/* 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;
     }
}