Отзывчивый css всегда применяет ландшафт

Question

Я пытаюсь понять, почему мой css всегда применяет размер шрифта h1 в ландшафте вместо портрета, когда я нахожусь в портрете (я - ноот в отзывчивом дизайне).

У кого-нибудь есть представление о том, что я делаю неправильно?

Спасибо!

Guillaume **** отредактировал новую версию: теперь работает.

/* FOR MOBILE */ 
@media only screen 
and (   max-device-width: 736px){ 
.coursBox1{ 
/* Useless CSS */ 
} 
.coursBox1 h1{ 
/* Useless CSS */ 
} 
} 
@media only screen 
and (   max-device-width: 736px) 
and (    orientation: portrait){ 
.coursBox1 h1{ 
    font-size: 10px; 
} 
} 
@media only screen 
and (   max-device-width: 736px) 
and (    orientation: landscape){ 
.coursBox1 h1{ 
    font-size: 100px; 
} 
} 

Answer 1

У вас есть некоторые ошибки в коде. Вы не используете , между логическими операторами. Вам также не хватает закрытия }. Кроме того, ваши медиа-запросы очень специфичны из-за оператора and.

Как новичок, я бы сбросил логические операторы и работал только с свойством device-width, так как это ключевое значение при запуске ваших запросов. Как только вы поймете, как это работает в вашем браузере, начните добавлять логические операторы.

Если вы хотите внести изменения в ваш размер шрифта или что-нибудь еще для мобильных устройств, таких как таблетки и меньше, то вы можете использовать что-то подобное:

/* This generally targets both tablets and phones */ 
@media (max-width: 1024px) { 
    h1 { 
    font-size: 21px; 
    } 
    // other styles targeted to tablet/phone devices 
} 

/* This generally targets phones sizes and smaller */ 
@media (max-width: 768px) { 
    h1 { 
    font-size: 18px; 
    } 
    // other styles targeted to phone devices 
} 

Это просто рекомендация.

См эти ресурсы для целого ряда устройств, в дикой природе с соответствующими их размерами: - http://viewportsizes.com/ - http://www.mydevice.io/devices/

и некоторые некоторые предварительно сделанные медиа запросов фрагментов пользовательского - Media Query Standard Devices

CSS media queries - MDN