Units

Units, as we've seen, are used to express sizes or distances in your CSS rules. Declaration-wise, it's pretty much a number followed by a chosen unit. They can be absolute or relative.

• Absolute: px, pt
• Relative:
  • em (emphemeral unit - multiply by the font size of the current element)
  • rem (root em - multiply by the font size set on the root element)
  • vh (hundredths of the viewport height)
  • vw (hundredths of the viewport width)
  • % (percent of parent element)

div {
	height: 10rem;
	width: 100vw;
	padding: 5px;
	font-size: 12pt;
	margin: 2%;
}

Relative measures should definitely be your preference because ideally you want your page to scale properly to different screen sizes. If you, for example, define the height and width of an image with absolute units, the image size will look the same in a mobile screen and in an ultra-wide one.

Can you think of potential issues related to this?