Быстрый способ пропорционально изменить все размеры в CSS сайта

Возникла у меня рабочая необходимость адаптировать дизайн сайта к приятному просмотру на большом экране с разрешением 1920px по ширине. Без адаптации сайт занимал примерно половину экрана — полосой в центре, что выглядело не презентабельно. Размеры всех элементов в CSS указаны в пикселях (в т.ч. размеры шрифтов). Несколько сотен строк кода, в которых все пиксельные значения надо пересчитать с коэффициентом 1.7: например, было 100px — стало 170px. Рутина на пару часов. К счастью, я больше люблю программирование, чем рутину, потому написал простую программку пересчёта.

Очень простую, но эффективную. Судите сами:

$out = preg_replace_callback( '~([\d]+)px~', 'change', $in );
function change( $x ){
	return round( $x[1] * 1.7 ) .'px';
}

В программу требуется передать текст $in (исходный CSS), и она вернёт текст $out, где любые значения, указанные в пикселях, станут больше на коэффициент 1.7. Осталось сохранить $out в файл style-x1.7.css и подключить в теге <head> после вызова style.css:

<link rel="stylesheet" media="all and (min-width: 1900px)" href="style-x1.7.css">

Хороший вариант, чтобы быстро срубить баблишко за результат, который выглядит согласно ТЗ.

А для себя любимых советую указывать в пикселях только базовые размеры, а остальные размеры указывать относительными значениями. Например, размеры шрифтов задать так:

body { font-size: 10px }
h1 { font-size: 2em }
.bigText { font-size: 1.5em }
footer { font-size: .5em }

Тогда для широких экранов достаточно будет указать один размер:

@media all and (min-width: 1900px) {
	body { font-size: 17px }
}

Чтобы все размеры шрифтов изменились пропорционально.

Не удобно, что в CSS не специфицирована возможность задавать высоту элементов пропорционально ширине, кроме как исходить от ширины вьюпорта, например: height: 20vw (высота будет 20% ширины вьюпорта). Но при использовании vw придётся делать полностью резиновый дизайн, что не всегда удачно. Остаётся использовать высоту в пикселях для блоков, пропорции которых в дизайне строго определены, либо прибегать к трюкам с CSS или JS.

Запись опубликована в рубрике Web-мастеринг с метками , , , , . Короткая ссылка для добавления в закладки: Быстрый способ пропорционально изменить все размеры в CSS сайта.

6 Responses

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.