应用于纵向和横向的媒体查询

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) { ... }