Em values in JavaScript

Try changing the font size in the boxes below to see getEmPixels() retrieve the corresponding pixel values.

html {
   font-size: 100%; /* 16px */

   body {
      font-size: 1.25em; /* 20px */

      header {
         font-size: 1rem; /* 16px */
      }

      main {
         font-size: 0.75em; /* 15px */

         section {
            font-size: 2em; /* 30px */

            ul {
               font-size: 0.75rem; /* 12px */
            }
         }
      }

      footer {
         font-size: 0.75em; /* 15px */
      }
   }
}

Say goodbye to hard-coded values in your JavaScript and instead use getEmPixels() to get the actual values.

Brought to you by Tyson Matanich