Медиа-запросы, предназначенные для портрета и пейзажа

Question

В настоящее время я создаю небольшой веб-сайт, включающий функции RWD, позволяющие ему хорошо работать на мобильных устройствах.

Мои мультимедийные запросы работают корректно в портретном режиме. Однако, когда я поворачиваю устройства, правила, похоже, больше не применяются.

Портрет Режим (320x480)

Используя код:

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