CSS lets you use relative length units, see this:
http://www.w3schools.com/cssref/css_units.asp
As suggested in that link before, em and rem create perfectly scalable sizes. Don't let the name and description fool you: although the size refers to the size of the M character, they can be applied to width, height and any other CSS property as well.
Also, if you use a main CSS class like this:
main_class { width: 1em; height: 1em; font-size: 10em; }
and all the other objects (or CSS styles) are childs of this class:
main_class.div { .... }
// or something like this in HTML
<BODY class="main_class">
<div class="other_class">something</div>
</BODY>
// in C++ the BODY widget would the parent of the div widget
You can then only change the main_class sizes, and all the child items of that class will scale accordingly to their parent. Suppose you have this CSS for that div element before:
other_class { width: 10em; height: 4em; font-size: 1.3em; }
and suppose that the main_class CSS is this:
main_class { width: 3em; height; 3m; font-size: 10em; }
then the real sizes of that other_class are actually:
width: 30 em; // 3 * 10
height: 12 em; // 3 * 4
font_size: 13 em; // 10 * 1.3
because they have been scaled by 3, 3 and 10ems, respectively. Using ems is for sure the best way in CSS to scale items proportionally.
I hope this helps :)
