CSS - Percentages or Pixels?

Question

I have been using CSS for many years now, and I have always been a 'percentage' kind of guy, as in I always define heights and widths using percentages as opposed to pixels (except, for example, when setting things such as margins, padding, etc, in which case I use pixels).

I would do something like this:

body{     height: 99%;     width: 99%;     margin-top: 10px; } 

but I often see examples such as this:

body{     height: 300px;     width: 250px;     margin-top: 10px; } 

My question is this: are there any benefits to using one over the other overall, and if so, what are they?

Answer 1

Mobile webpages. %'s rock for that. As it will (obviously) adjust to suit.

However when you want a fixed width for say example an article of text that you want displayed in a certain way, px's is the winner.

Both have many plus's and minus's over each other :)

Answer 2

I use pixels on my website and I keep a maximum width of 1000px. My website displays properly on my 11" netbook, however does not do very well with mobile devices, but that is what this is for:

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" /> 

I find developing websites in percentages very time intensive, having to consider all re-sizing events, such as:

overflow:scroll; 

Pixels and percentages both have their perks, but I would say that pixels would be a better choice because of precision, reliability, and is easier to develop. Also another thing to consider are pixels and percentages for fonts. Here is my rule of thumb:

• If you are developing a website with percentages, use percentages for the font, for the reasons of keeping proportions correct.
• If you are developing a website with pixels, use pixels for the font.

If you have people that may need to enlarge the font it is always better to use percentages for the font.