CSS upscale all elements

Question

I have a CSS file associated with a project where all element sizes and offsets (eg images and fonts) are defined using px values. These px values are based on the target platform having a fixed screen resolution of 960x540.

I'd like to scale all these values up for a different platform that uses a resolution of 1280x720 and I'm looking for a tool that will enable me to do this. The platforms involved don't have much CPU power and they don't all support the same degree of CSS3 functionality so I would prefer to avoid trying to do this at run time within the app.

I haven't found anything with Google so does anyone know of an online tool that will do the job?

Answer 1

It may not be very helpful right now..but to avoid problems like this in the future I would suggest you do not write explicit css but rather use a tool like lesscss.

The good thing is, that you can define global variables and such so you can just specify at the top of the file the screen width and height and use these variables to calculate the scale for other elements.
For example:

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

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

When you are finished writing, a js tool compiles the lesscss file into valid css that you can then use for your application.
So when you need to change the resolution again you change only the two variables @w and @h and compile the css again.

Answer 2

CSS media queries would be the best solution, but as you don't want to use CSS3 then you could use JavaScript. Something like Adapt.js shoudl do the trick.