I have block level elements with its height property set in %. Inside these block level elements are <span>s with text. Example:
<body style="height: 100%;">
<menu style="height: 10%;">
<button style="display: block; height: 100%;">
<span style="font-size: 4em; line-height: 200%;">text</span>
</button>
</menu>
</body>
This looks fairly well on a mobile browser, except when I rotate the device (that is, once the body.onorientationchange event kicks in), the text becomes too big.
So my question is, how can I specify the text size relative to the height of the parent element?