UX Design and Development course

CSS unites of measurement

In CSS there are basic units that can be used. read more

  • px
    • Used to measure pixels
    • A non-fluid unit of measurement
    • Recommended for @media screen
  • pt, pc
    • Used to measure points or picas
    • A non-fluid unit of measurement
    • Recommended for @media print only
  • cm, in, mm
    • Used to measure centimeters, inches and millimeters
    • A non-fluid unit of measurement
    • Recommended for @media print only
  • em
    • Used to measure the em width of your typography
    • A fluid measurement of space in relation to the size if your type
    • Dependent on the font-size of it's parent container
    • Recommended for @media screen
  • rem
    • Used to measure the rem width of your typography
    • Not dependent on the font-size of it's parent container
    • A fluid measurement of space in relation to the size if your root type
    • Recommended for @media screen
  • percent
    • Used to measure the percentage of space within a given container
    • The most fluid measurement type available
    • Recommended for @media screen and @media print

Rem units and Mobile Safari breakpoints

While Mobile Safari supports the use of rems in all property values, it seems to shit the bed when rems are used in dimensional media queries and infinitely flashes the page's text in different sizes.

For now, use ems in place of rems.

html {
  font-size: 16px;
}

/* Causes flashing bug in Mobile Safari */
@media (min-width: 40rem) {
  html {
    font-size: 20px;
  }
}

/* Works great in Mobile Safari */
@media (min-width: 40em) {
  html {
    font-size: 20px;
  }
}