3

What unit or approach is best (or at least good!) practice for using measurements relative to screen size? I'm constraining this question to mobile devices, which I suspect may affect the answers. I'd thus wrap the styles inside @media (hover:none), (hover:on-demand) { }.

Improve this question

1 Answer 1

Reset to default
5

[...] measurements relative to screen size

For elements at the top level within <body> you can use %.

But in many cases I'd be inclined to use viewport units:

  • vw - 1% of the viewport width
  • vh - 1% of the viewport height
  • vmax - equal to 1% of whichever is larger, viewport width or viewport height
  • vmin - equal to 1% of whichever is smaller, viewport width or viewport height

Further Reading:

Improve this answer
2
  • 1
    One thing that's slightly bad about vw is that if there's a scrollbar then the box will ignore it, leaving horizontal and vertical scrolling. But vh always works fine.
    – corn on the cob
    Commented Aug 25, 2020 at 15:18
  • 2
    Agreed, @Sven - 100vw and 100% of <body> give different results depending on what type of scrollbar you're dealing with - a touchscreen style scrollbar or a desktop window viewport style scrollbar. This is consistently a pain, but it won't be resolved until we have OS-agnostic scrollbars.
    – Rounin
    Commented Aug 25, 2020 at 18:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.