Remember to always include this meta tag in the <head> of every html document to assist in making your website mobile-friendly:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here's a quick summary of responsive units:

  • % is relative to the parent element's size
  • VW, VH are relative to the viewport's (browser window or screen) size
  • EM is relative to the current element or parent element's font-size
  • REM is relative to the root element's (<html>) font-size

Further Reading