@Hecktosaurus
Люблю писать код под специфические задачи

Приёмы адаптивной вёрстки под различные масштабы и плотность пикселей?

Вёрстка под 1920px на обычном ПК fullhd-мониторе смотрится как на макете. Стоит открыть на ноутбуке (разрешение то же, масштаб в системе установлен на 110%), либо же маке - все элементы начинают выглядеть громадными, сайт не имеет свободных полей по краям.

Вьюпорт установлен как
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Интересует, какие распространены практики, чтобы такого не было, и сайт на всех настольных устройствах смотрелся адекватно? Сам пока попробовал такой вариант: перегнать абсолютно все размеры из px в rem (шрифты, размеры блоков, px в медиа-запросах и т.д.), затем меняю размер шрифта корневого элемента через:
@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi) {
	html{
		font-size: 14px;
	}
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
	html{
		font-size: 12px;
	}
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	html{
		font-size: 11px;
	}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	html{
		font-size: 8px;
	}
}


Подход выше решил проблему на десктопах, но испортил картинку на мобильных. Возможно, нужно добавить (min-width: ***), чтобы отсечь эти правила от планшетов/мобильных?
  • Вопрос задан
  • 353 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
move2usajobs LLC Лос-Анджелес
от 2 000 до 4 000 $
Wanted. Санкт-Петербург
До 180 000 ₽
14 нояб. 2024, в 19:39
2000 руб./за проект
14 нояб. 2024, в 19:20
30000 руб./за проект
14 нояб. 2024, в 18:49
1500 руб./в час