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

Question

[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: ***), чтобы отсечь эти правила от планшетов/мобильных?

Comments

[Ankhena]

Скорее всего неудачно написаны media и остальные правила. И в результате просто что-то вывалилось из контейнеров.
Ретина не влияет на размер шрифта. Для неё нужно готовить только отдельные картинки в 2х или 3х.

110% при исходных 1920 = ~1745
Т.е. на ноутбуке будет отображаться точно также, как если вы выставите в адаптивном режиме эту ширину.
Вот и проверяйте, что там ломается на такой ширине (и на соседних тоже).