Which one? em, pt, px, %

[veledrom]

Hi,

What is the best out of "em, pt, px, %" to use for all browsers and platforms?

e.g.
pt is better for this purpose.
em is better for this purpose.
etc.

Thanks

[MidiMagic]

Answers:

For browser and monitor screen resolution compatibility:
- Use % to place objects on the page or set sizes on the page.
- Use em for sizes and distances related to the text size rendered.
- Use the relative text size names, or use a percentage of the base font, to set font sizes.
- You can use % or em to resize an image, but it might lose quality.
- Use em to get border sizes that stay the same as the resolution changes. But they might get fuzzy edges, due to the boundaries not lining up with the edges of the pixels.

To make objects appear a certain size on the screen (assuming the computer knows the screen size):
- Use in or cm for absolute sizes.
- Use in or cm to resize an image to a specified size. But be aware that the image might lose quality. Specify the width, and the height will scale proportionally. If you specify both width and height, the image might be distorted.
- Use pt to specify a type point size of text. Note that this can change with different resolutions.

For fixed size objects:
- If you do not specify the size of an image, it will default to the pixel size of the image itself as it fits on the screen.
- Use px to make an image as sharp as it can be. But the image will fill different portions of the screen with different browser resolutions.
- Use px to get thin lines without fuzzy effects on the edges.
- NEVER use px to position objects on the screen.

If you design your text to flow around the pictures, the change in size will not be so noticeable.