Как учесть большинство экранов смартфонов используя @media css3?

Question

[mankutila]

Я делаю мобильное приложение используя Cordova, и с медиа запросами CSS возникло недопонимание.

Пытаясь заставить выглядеть приложение одинаково на большинстве устройств, я в какой-то момент поняла, что пишу media query отдельно для каждого тестового устройства (сейчас у меня под рукой XIAOMI Redmi Note 3, XIAOMI Redmi 3S, Huawei ATH-UL01, Huawei KII-L21, HTC One).

Первое, что непонятно, это то, что

@media screen and (device-width: 360px) and (min-device-height: 540px) and (-webkit-device-pixel-ratio: 3) {
    }

подходит для XIAOMI Redmi Note 3, но не подходит для Huawei ATH-UL01, хотя их характеристики (device-width и pixel-ratio) одинаковы! Возможно, в медиа запросе нужно учесть еще что-то, кроме ширины и dpr?

Больше всего на разных экранах скачут `font-size` и `line-height`. Как этого избежать? Может, стоит использовать em? Сейчас я использую пиксели, которые переопределяю в медиа запросах.

Во-вторых, мне кажется, что это нездоровый путь писать медиа запросы под каждое устройство, которое было од рукой. Какие есть good practice, как делаете вы? Как более-менее обобщить всё разнообразие экранов?

Comments

[Михаил Дудар]

Best practice можно подглядеть например в bootstrap. Рекоммендую вам делать диапазоны медиа запросов - не конкретно device-width = xxx, а скажем min-width = xxx - таким образом вы обобщите все девайсы с размером окна больше xxx. Соответственно и max-width...

Answer 1

[Алекс Глебов]

Вы в примере указали точную ширину и высоту, так точно никто не делает.

v4-alpha.getbootstrap.com/layout/overview
Медиазапросы бутстрапа - они удобные

Для адаптивной типографики
font-size: calc(1rem + 1.23vw);
Выличина шрифта привязана к ширине экрана, а 1рем ограничивает минимальный размер.

Answer 2

[Lam Besis]

Рекомендую очень внимательно ознакомиться с этой статьей: 100% правильный способ делать контрольные точки в CSS
В ней ответы на все вопросы и описан самый логичный и правильный подход к медиа-запросам.

Answer 3

[Davlik]

Используйте vw,vh,vmin,vmax

Answer 4

[Kote]

Ваш подход в корне неверный, нужно делать резиновый лейаут и расстановка брекпоинтов зависит только от контентной составляющей, но никак не окружения

Answer 5

[Огнеупорный Таракан]

А еще у bootstrap4 есть направления down и up в брекпоинтах:

.hidden-xs-down
.hidden-sm-down
.hidden-xl-up

Они должны помочь

Answer 6

[xmoonlight]

Вот тут подрбно про сегментационный резиновый layout.
А остальное: rem + v*

Answer 7

[Philipp]

А я вот все больше прихожу к тому, что размер шрифта нужно указывать в абсолютных единицах, таких как mm.
Устройств становится все больше и больше. Каждые отображает по-своему. А со шрифтом трудно, он должен быть определенного размера, который можно нормально читать. Проще говоря, работает чистая физика.
Вообще я считаю, что устройства не должны проходить сертификацию, если они не могут правильно отображать физические размеры. Я понимаю, что может быть погрешность, но небольшая, в пределах 1-2 пикселей на 10 см.