HTML default element size (Scaling HTML pages)

Question

Hello,

Is there a way to work out the likely size of an HTML element, an H1 tag for example in pixels relative to the size of the view port.

I am wanting to display HTML pages within within pages, and I want to scale the content appropriately. Clearly, if an element specifies a height in px or similar, I can scale that down easily, but if no height is given, how can I proceed?

Any suggestions, pointers or ideas welcome, it doesn't matter if any code is in PHP or Python, or C++, or ASP... as I'm looking for a method, not code per se.

Thanks

mintydog

Answer 1

Take one of the reset CSS files in the web and use them (modify them so all elements have sizes).
Use percentages or EM for sizes.

Answer 2

body {
    font-size: 62.5%;
}

#container {
    font-size: 1.0em; /* eq to 10px */
}

Then font-size or element sizing/scaling will happen on a scale such as:

• 1.0em = 10px
• 1.1em = 11px
• 1.2em = 12px
• 2.0em = 20px
• 5.0em = 50px

If you have your elements in another div you could just then put a .5em or something to make it a thumbnail version of the site as long as it conforms to the same em structure. If not you will have to do screenshots.

Also like Itay mentioned you should start with a reset.css first then do this to help keep it consistent. You will have to re-apply styles for tags liks strong, em, headings, etc but you will always have a correct base when using reset.css files before doing stuff like above such as Eric Meyer's reset.css