css - @media queries for mobile - Portrait vs Landscape

Question

I am using media queries to address mobile screens.

Issue i am facing is with text on the header with Portrait vs Landscape. The landscape "top" property takes over the portrait one. Meaning; to position the landscape text properly, on the portrait it gets positioned too high! Any idea what's the solution to this? How to get portrait and landscape to respect each-other properties and not overtake each-other?

Or how would you approach it?

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

标签： cssmedia-querieslandscape-portrait

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