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 pixel

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 like percentages too but it in certain cases it doesn't do what I expect. If for example i have two buttons sharing the same row with max-width: 50%, and the current viewport is not an even number, one of them will always be noticeably slightly larger.

Answer 3

There is obviously no right or wrong. Its rather a matter of fluidity.

It's easier to position objects relative to each other with pixels and to control exact height and width.

Scaling objects is on other hand easier with percentages. 50% of the window width will always be half of the window with no matter the screen size.

Answer 4

If you want objects to be the same size not matter what, then pixels(not affected by zooming or screen size). Can also look into using EM's as well. I think EM's are sort of in the middle, where they are affected by zooming, but not by screen size.

Answer 5

% are the way to go in a modern world just like Vector graphics. As screens get larger or smaller you can scale properly regardless of resolution.

Answer 6

Use Both =D

With You can always combine using both if you are confused about it)

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value).

It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/).

.my-class {
    widht: calc(100% - 20px);
    height: calc(50% + 10px);
}

Browser Support is surprisingly good. Can I use...

Useful reading: CSS-Tricks