CSS CSS Basics Understanding Values and Units Percentages

Jonthue Michel
Jonthue Michel
1,462 Points

So wouldn't pxiel length values be more mobile friendly than px?

What would be the need for px if its better to use percentages for total flexable site?

1 Answer

Kevin Korte
Kevin Korte
28,082 Points

As you'll learn, there will be times when you don't want things to change by percentages. A rough and dirty example is let's say you had a two column layout. The total of the two columns could be 80% of the screen width, and each column could be 30% of the screen width, but if the distance between the two columns was something like 5%, on a large screen that might be 40 or 50 pixels, which would look weird. In that case, it might not be a bad idea to fixe the distance between the two columns at 10 or 15 pixels and let everything else around it grow as the screen size does.

Lots of other examples, but that's just one.

Jonthue Michel
Jonthue Michel
1,462 Points

Could the lessning the percentage could work?

Jonthue Michel
Jonthue Michel
1,462 Points

I heard the em could be out of wack also

Kevin Korte
Kevin Korte
28,082 Points

Lessing the percentage could work against me the other way, on smaller screens 5% might only be 4 or 5 pixels, which also wouldn't look right.

Sometimes sidebars have a fixed pixel width inside of a fluid design, that's a common design pattern as well.

There are definitely times you want fixed values, not relative values.

I like em, and rem when used correctly. I don't tend to every set font sizes in percentages. I'd much rather use 2em over 200%. It's easier and cleaner to write.

Graeme Oxley
Graeme Oxley
8,918 Points

Completely agree about the use of em/rem, especially considering the current dominating trend of responsive design. I would say that I use em 99% of the time, so that adjusting font sizes for the entire site is literally down to changing one base size (usually on the body).

As for body elements, I tend to use percentages for the responsiveness and reserve the use of pixels when I want to keep something from breaking (a series of buttons that I want to stay the way they are positioned) or re-sizing (a logo or something that I want to stay a specific size).