What is best css unit to make the the webpage look good even after zooming?

My page looks good without zooming. but when i zooming in firefox and in IE, it looks ugly because some of the content开发者_如何转开发s wraps down in to next line.

I think that the problem is in unit i am using. I am using pixels for setting the width.

What units I should use to prevent ugly look of pages while zooming?? Plz help

---

If you want to zoom everything (containers as well as fonts) you could use em. Beware though that it is notoriously difficult to maintain. If you change one parent size then all children sizes will be affected.

It could be partly solved by avoiding nesting tags as much as possible. Of course it's unavoidable most of the time, but don't go too deep if you don't have to.

---

Generally, using em's and percentages is a good choice as they are relative, rather than the definite pixel. If you set something as 4em wide (guessing the right figures is a fun game - start with maybe 10px=1em and go from there), then when you zoom/the text size is changed, the box stays about the same size relative to the text.

For reference, it's worth mentioning the EM is relative to the font size of it's parent. So 1em is 100% the same size as the font. Like mentioned in another answer, nesting them too many times causes a cascade.

It's also maybe interesting whether when you say zooming, you mean changing the font size. Zooming shouldn't affect the layout, whereas making the text would. (I'm normally a chrome user and away from my pc atm, so can't be sure for IE and FF).

---

Todays browsers have two different zoom methods: font-size scaling and magnification. The second one is no problem but the first one is. Because there only the font-size is increased/decreased but not the whole view.

So you should use a layout that uses the font-size as its base. Most browsers have a default font-size of 16 pixels. You can use that and derive almost any pixel value you want by multiplying with an appropriate factor.

If you, for example, want your main column’s width to be 800 pixels, use width:50em (50·16=800 or 800/16=50).

---

All that passion around relatives units could not be issued by real web designers. I know it's been fashionable these last years, but in real life, you can't rely on em for your designs as soon as they involve image backgrounds, or images as main subjects for example.

Examples where relative units makes life harder are :

• image-style headers
• product catalogs with pictures
• lengths concatenations relative to the browser's window

So i would say that you cannot avoid pixel sizes in some cases, and when that happend, it breaks the whole nice full-relative-sizes design you are so proud of.

Nowadays major browsers know how to magnificate (differs from "zoom") a content with all its elements, even though they are defined in pixels. A full pixel design is nice too if you follow some rules for spacing elements (based on the font size). And it works on most mobile browsers too.

I'm already seeing the army of fixed-size design loading their weapons. That's only my experience. I also love relative-size designs but in some projects they were simply impossible to apply without hords of tricks.

In short: do it all fixed or all relative, but choose.