Студия дизайна «Разумный подход» Владимира Соловьёва, podhod.ru

Быстрая адаптация сайтов к высокому разрешению монитора

Владимир Соловьёв, 27 февраля, 2015

Исторический сложилось, что принципы указания размеров элементов веб-страницы в стилях CSS были сформированы при небольших, по сегодняшним меркам, разрешениях экранов. При этом в CSS приняты к использованию несколько различных систем измерения: привязанные к размерам пикселя px, к пропорциям браузера % и к размера шрифта em и pt. Чтобы не связываться с этим историческим наследием можно использовать современные возможности стилей.

Чтобы быстро адаптировать сайт к высоким разрешениям, не переделывая ничего кардинально, следует в стилях CSS на всеохватывающий тэг HTML поставить увеличение с помощью последовательных диапазонов media queries.

@media (min-width: 4200px) and all {
html{zoom: 3;}
}

@media (min-width: 3500px) and (max-width: 4199px) {
html{zoom: 2.5;}
}

@media (min-width: 2800px) and (max-width: 3499px) {
html{zoom: 2;}
}

@media (min-width: 2000px) and (max-width: 2799px) {
html{zoom: 1.5;}
}

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

Способ стоит использовать только на вёрстке не рассчитанной на высокие разрешения. Свойство zoom поддерживается сегодня практически всеми современными браузерами.

Задать вопрос