Быстрый способ пропорционально изменить все размеры в 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

  1. andi говорит:

    Как всегда, замечательное решение)

    Только нужно учесть места, которые не должны меняться. Например, стандартные баннеры (типоразмера 468×60 иже с ним) или тизеры. Это потом, ручками, поправить.

    • Павлуха говорит:

      Хорошее предложение, Анди! Если решишь этим заняться и внедрить какой-либо ещё функционал, я на авторское право исходного продукта не претендую ;)

      • andi говорит:

        Ну да, яжпрограммист 😀

        Про учесть — не про тебя речь, а про того, кто использует скрипт. Встречаются блоки, которые должны быть фиксированными. То-есть, ручками иногда всё же придётся поработать.

  2. Кирилл говорит:

    Ееееее! Оптимизация!

  3. Александр говорит:

    Класс, как раз думал, как оптимизировать данный процесс

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

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

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