CSS улучшит все элементы

Question

У меня есть файл CSS, связанный с проектом, в котором все размеры и смещения элементов (например, изображения и шрифты) определяются с использованием значений px. Эти значения px основаны на целевой платформе, имеющей фиксированное разрешение экрана 960x540.

Я хотел бы масштабировать все эти значения для другой платформы, которая использует разрешение 1280x720, и я ищу инструмент, который позволил бы мне сделать это. У задействованных платформ не так много ресурсов процессора, и все они не поддерживают одинаковую степень функциональности CSS3, поэтому я бы предпочел не пытаться делать это во время выполнения в приложении.

Я ничего не нашел с Google, так кто-нибудь знает онлайн-инструмент, который сделает эту работу?

Answer 1

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

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

@w: 1280px;
@h: 720px;

#some_div {
    width: @w / 2;
    height: @h / 2;
}

Когда вы закончите писать, инструмент js компилирует файл lesscss в правильный css, который вы затем сможете использовать для своего приложения.
Поэтому, когда вам нужно снова изменить разрешение, вы изменяете только две переменные @w а также @h и снова скомпилируйте css.

Answer 2

Медиа-запросы CSS были бы лучшим решением, но, поскольку вы не хотите использовать CSS3, вы можете использовать JavaScript. Что-то вроде Adapt.js должно сделать свое дело.