應用於縱向和橫向的媒體查詢

Question

我目前正在構建包含RWD功能的小型網站，以使其能夠在移動設備上正常運行。

我的媒體查詢似乎在縱向模式下正常工作。但是，當我旋轉設備時，規則似乎不再適用。

人像模式（480）

使用代碼：

@media only screen and (min-width: 320px) and (max-width: 480px) 

相同的媒體的查詢呈現此在

風景模式（分辨率480x320）

你大概可以做出來，我的媒體查詢取決於屏幕的寬度調整字體大小。奇怪的是，即使媒體查詢也適用於它，橫向視圖中的字體也不會改變。

媒體查詢的全碼：

/*................................ 
MEDIA QUERIES - Phones 
..................................*/ 

@media only screen and (min-width: 320px) and (max-width: 480px) { 

/*............................ 
FONTS 
..............................*/ 

html { 
    font-size: 70%; 

} 

p.promo { 
    line-height: 1.4em; 
} 

} 

/*.............................. 
LAYOUT 
................................*/ 

.clientLogo { 
    float: left; 
    height: 60px; 
    width: 60px; 
    margin: 10px 10px 10px 30px; 
    background: $moondust; 
} 

/* Phones - Landscape */ 

/*................................ 
MEDIA QUERIES - Tablets 
..................................*/ 

@media only screen and (min-width: 481px) and (max-width: 768px) { 

/*............................ 
FONTS 
..............................*/ 

html { 
    font-size: 85%; 
} 

p.promo { 
    line-height: 1.5em; 
} 

/*............................. 
LAYOUT 
...............................*/ 

.clientLogo { 
    float: left; 
    height: 80px; 
    width: 80px; 
    margin: 10px 30px 10px 30px; 
    background: $moondust; 

} 

} 

/*................................ 
MEDIA QUERIES - Desktops 
..................................*/ 

@media only screen and (min-width: 769px) { 

/*............................ 
FONTS 
..............................*/ 

html { 
    font-size: 100%; 
} 


/*............................... 
LAYOUT 
.................................*/ 

.clientLogo { 
    float: left; 
    height: 120px; 
    width: 120px; 
    margin: 10px 30px 10px 30px; 
    background: $moondust; 

} 

} 

Answer 1

你試過嗎？

@media (min-width: 480px) and (orientation: landscape) { ... }