Hacking CSS rem into a responsive unit

responsive-rem.css

/**
 * Responsive rem hack
 * ---
 * Makes the `rem` unit behave like a dynamic value based on the viewport, with a max width.
 * This makes it easy to apply dynamic values to margin and paddings.
 * warning, `rem` becomes useless for font-sizes.
 *
 * Usage:
 * 
 * .vertical-spacing {
 *   margin-top: 10rem;
 *   margin-bottom: 10rem;
 * }
 */
html {
  font-size: 16px;
  
  /* for any viewport size smaller than 1000px map rem to vw (viewport width) */
  @media (max-width: 1000px) {
    font-size: 1.6vw;
  }
}