Cacher is the code snippet organizer for pro developers

//* Case 1 */
html {
  font-size: 100%; // In most browsers, this defaults to 16px
  
  @media (min-width: 768px) {
    font-size: 112.5%; // 18px in most browsers
  }
}

h1 {
  font-size: 4rem; // 16px x 4 = 64px
}

//* Case 2 */
html { 
  font-size:62.5%;
  
  body {
    font-size: 1.6rem; // = 16px
  }
}

h1 {
  font-size: 6.4rem; // = 64px
}