Как учитывать диагональ при вёрстке?

Question

[Dmitry]

Есть, допустим, монитор и планшет, оба с одинаковым разрешением, пусть будет 1024*768. Элементы одной и той же страницы сайта на мониторе будут громоздкими, а на планшете слишком маленькими. Как сделать медиа-запрос, чтобы учитывать не только разрешение, но и размеры экрана?

Comments

[Hovhannes Varosyan]

используйте - max-width, min-width, и относительную длину

[Владислав Лысков]

давно ты видел мониторы 1024х768?

[catch-a-chalk]

Владислав Лысков, ну надо, так надо

[Ankhena]

Как сделать медиа-запрос, чтобы учитывать не только разрешение, но и размеры экрана?

Для этого есть viewport и масштабирование самого устройства.

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

[ProjectSoft]

Владислав Лысков, а на чём сейчас в школах учатся?
Я видел от 1024 до 1376 С большим размером просто нет у учеников.

[Вадим]

Для сайта важно не аппаратное разрешение матрицы монитора, а логическое - с учётом масштабирования ОС. Так, например, практически никто не использует 4К дисплеи в масштабе 100%. Вероятнее всего у пользователя будет масштаб 150% или скорее 200%. И на выходе мы имеем привычные 1920px по ширине. И вот под это и нужно делать медиа-запрос. То же самое и в телефонах. Там матрицы на вполне себе десктопные размеры. Но с учётом масштаба мобильники всё равно укладываются в media (max-width: 640px). 640 - 980px - это условно планшеты. 980 - 1366 (или даже 1200) - ноутбуки. Ну а выше 1200 - десктоп. Это не жёсткие границы, но можете ориентироваться на эти значения, а дальше проверяйте, как оно для вашей конкретной вёрстки.

Answer 1

[catch-a-chalk]

Привет! Тут есть несколько способов и все через медиазапросы:

// 1. Физические единицы измерения
@media (min-width: 30cm) {…}

// 2. Плотность пикселей
@media (min-resolution: 2dppx) {…}

// 3. Пропорции сторон экрана
@media (device-aspect-ratio: 16/9) {…}

Сам всегда использую медиа запросы и относительные единицы rem, так как слишком много экранов и писать под все громоздко. Скорее всего, придется помучиться и комбинировать способы, плюс не все браузеры могут в физические размеры. Рассмотрите функцию clamp в CSS (статья на Хабре)

Comments

[Ankhena]

1cm = 38px
так что не поможет

Answer 2

[alexalexes]

Играет роль только ширина экрана в медиа запросе, высота учитывается/корректируется этими запросами только для отдельных элементов, которые находятся в position absolute/fixed, либо нужно какое-то модальное окно сделать - там где, принципиально нужно вместить элементы страницы в область просмотра целиком.