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

tog22
  • 409
  • 5
  • 17

1 Answers1

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:

Rounin
  • 2,335
  • 2
  • 16
  • 33
  • 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 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