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) { }.

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:

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. Aug 25 '20 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
    Aug 25 '20 at 18:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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