Responsive Design - measurents

  • Fixed: px, pt, pc, in, mm, cm
  • Proportional: % – percent of container size
  • em – current font size based on context
    • html { font-size: 16px }
    • 1em = 16 px
    • However - header { font-size: 36px } header h1 { font-size: 1em } would make the header h1 = 36px
  • rem – Root em, font size of html tag
    • html { font-size: 16px }
    • 1rem = 16 px
    • However - header { font-size: 36px } header h1 { font-size: 1em } would make the header h1 = 16px
  • vw – 1% of viewport width
  • vh – 1% of viewport height