Быстрый способ пропорционально изменить все размеры в 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.
6 ответов к “Быстрый способ пропорционально изменить все размеры в CSS сайта”
Как всегда, замечательное решение)
Только нужно учесть места, которые не должны меняться. Например, стандартные баннеры (типоразмера 468×60 иже с ним) или тизеры. Это потом, ручками, поправить.
Хорошее предложение, Анди! Если решишь этим заняться и внедрить какой-либо ещё функционал, я на авторское право исходного продукта не претендую
Ну да, яжпрограммист 😀
Про учесть — не про тебя речь, а про того, кто использует скрипт. Встречаются блоки, которые должны быть фиксированными. То-есть, ручками иногда всё же придётся поработать.
Ееееее! Оптимизация!
Оптимизация кухнииии!
Класс, как раз думал, как оптимизировать данный процесс