Css Units

CSS units are an essential part of frontend development, as they allow developers to specify the size, position, and other properties of HTML elements. In this guide, we'll cover the most commonly used CSS units, their advantages and disadvantages, and how to use them effectively to improve website accessibility.

Pixels (px)

Pixels are the most commonly used CSS unit, as they provide precise control over element size and position. They are an absolute unit, meaning that their value remains constant regardless of the screen resolution or device pixel density. However, this can be a disadvantage for users with visual impairments or those who rely on assistive technologies, as pixel-sized text and images may be difficult to read or see.

h1 {
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 20px;
}

Percentages (%)

Percentages are a relative unit, meaning that their value is relative to the parent element's size. They are commonly used for responsive design, as they allow elements to scale proportionally based on the screen size or device. However, percentages can be challenging to use with complex layouts or nested elements, as they can be difficult to calculate and maintain.

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

img {
  width: 100%;
  height: auto;
}

Viewport Units (vw, vh, vmin, vmax)

Viewport units are a relative unit that refers to the size of the viewport, or the visible area of the browser window. They are commonly used for responsive design, as they allow elements to scale based on the screen size or device. However, viewport units can be challenging to use with nested elements or layouts, as they can be difficult to calculate and maintain.

header {
  height: 20vh;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

EM and REM

EM and REM are relative units that refer to the size of the element's font. EM is relative to the parent element's font size, while REM is relative to the root element's font size. They are commonly used for typography and responsive design, as they allow elements to scale proportionally based on the font size. However, EM and REM can be challenging to use with complex layouts or nested elements, as they can be difficult to calculate and maintain.

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

p {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 10px;
}

Absolute Units (in, cm, mm, pt, PC)

Absolute units are fixed units that refer to a physical measurement, such as inches or centimeters. They are rarely used in frontend development, as they do not scale based on the screen size or device. However, absolute units can be useful for print styles or when precise physical measurements are required.

@media print {
  h1 {
    font-size: 1in;
    line-height: 1.2;
    margin-bottom: 20px;
  }
}

In conclusion, CSS units are essential for frontend development. Choosing the right CSS unit will depend on the project requirements and design goals. For better website accessibility, relative units such as percentages, viewport units, EM, and REM are preferred over absolute units such as pixels.

Vikas Taliyan's Blog