Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Values and Units Relative Length Units

Sean Edevane
Sean Edevane
9,133 Points
Posted by Sean Edevane
Sean Edevane
9,133 Points

How do the viewport relative units compare with using a percent value for defining sizes?

And a follow-up: are these useful because percent based values don't behave consistent across browsers and/or devices?

1 Answer

S Alexander
S Alexander
18,962 Points
S Alexander
S Alexander
18,962 Points

Hey, Sean.

Percent values are relative to the parent container, whereas viewport relative units are relative to the viewport.

I think viewport relative units are more useful when designing for multiple devices because they cut out a step. Before I can imagine what something will look like on a medium device, if I use percentages, I have to first think through how my medium-device rules affect its parent container (i.e., to ask, "what will be the relative proportions of that parent container to the viewport?"). If I use viewport relative units, I can skip that step... and so cut out many opportunities to make mistakes.

The fewer chances to make mistakes, the more efficient (and pleasurable) the work. That's my basic philosophy for improving workflows, anyway.

Cheers, Alex

Sean Edevane
Sean Edevane
9,133 Points
Sean Edevane
Sean Edevane
9,133 Points

Hey Alex,

Thanks for the detailed answer! I'll have to play around with the units some later.