I need a scalable HTML5 website design. My idea is to define a “base” font-size of 1px in the body element and define all child elements relatively to this value in “em”.
More precisely: All sizes (width, height, margin, padding and font-size) of the child elements (images, divs etc.) are defined in “em” units, so it is easy to scale the whole website only by changing the “base” font-size (in the body).
I need to do this since different mobile devices have different screen sizes and also different devicePixelRatio values.
So, if I detect a bigger screen size (e.g. 1.2x bigger) via JavaScript, I can simply set font-size: 1.2px just for the body element and the whole website should be 1.2x bigger.
Example:
<!doctype html>
<html>
<head>
<title>foo</title>
<style>
body{
font-size: 1px;
/* If a sceen is 1.2x bigger than this "default" size, then change font-size to 1.2px */
}
#myimg{
/* 200em = 200px in this case because body font-size=1px */
width: 200em;
height: 200em;
}
#somediv{
width: 100em;
height: 100em;
font-size: 20em;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="myimg" src="foo.jpg">
<div id="somediv">
foo
</div>
</div>
</body>
</html>
The only problem is that containers that have a font-size (e.g. 22em) defined, also define a new “base” font-size for their child elements, so this must be avoided.
Example style (Must not happen!)
#wrapper{
font-size: 3px;
}
If this style above would have been added, all child containers (and their children) would become 3 times bigger (=not what I want).
Is this whole idea a practicable solution, or are there better ways to create a fully scalable design?
I tried my solution described and it worked very well.
I also noted that this seems to be a pretty common practice.
The only thing that I recommend to change is to use a base font size of 10px (instead of 1px) and divide all child element by 10.