Медиа-запросы и ориентация экрана

Question

Я создаю адаптивную веб-страницу дизайна и хочу убедиться, что правильно выполняю все медиазапросы для разных устройств и ориентаций.

В этом посте предлагается попробовать использовать медиазапросы min-width и min-height. И установить разные точки останова для разных разрешений.

ориентация экрана для нескольких планшетов с жидким дизайном

Хотя я нашел этот метод с ориентацией (см. Ниже). Должен ли я использовать этот подход или выше? Должен ли я использовать экран @media, или я должен рассмотреть все против экрана?

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

Answer 1

Ориентация экрана интересна, так как она не всегда сообщается устройством / браузером, поэтому ее использование менее надежно, чем min-width / max-width.

Другое дело, что есливы пытаетесь сделать что-то необычное, когда устройство находится в альбомной ориентации, тогда достаточно просто отрегулировать свой дизайн на основе точек останова ширины, чтобы получить желаемый эффект.

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

Что касается медиа all против screen, я обычно просто придерживаюсь экрана, так как пользователь должен сделать что-то вродераспечатайте страницу, я не обязательно хочу, чтобы мои точки останова вмешивались в это.

Как и во всем, вам следует подумать о наиболее распространенных случаях использования для ваших пользователей и принимать решения на основе этого. Если это просто обычное веб-приложение / страница, то нет ничего плохого в том, чтобы использовать только screen и не беспокоиться о orientation.