Responsive with CSS em

rem After we establish this known font size, we are safe to use regular ems throughout the module.

• calc() as CSS unit value
• Viewport units: vw, vh, vmin, vmax

html {
  font-size: calc(0.6em + 1vw);
}

With your page made up of scalable modules, each grounded to the rem value, and they too will scale with the viewport.

.panel--large { font-size: 1.2rem; }

Design a responsive site with em-based sizing

• Article

Docs

• 1em is the same as the font-size of the current element (more specifically, the width of a capital letter M.) Font sizes are inherited by elements from their parents
• The rem (root em) works in exactly the same way as the em, except that it will always equal the size of the default base font-size
• vw, vh: Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport, the smaller of the two vmin, or the larger of the two vmax