CSS Tutorial : viewport units

Part 1 Different units

1.1 px

.parent{
  width:200px;
  height:200px;
}

.child{
  width:100px;
  height:100px;
}
Try It Yourself

Note: Absolute unit, 1px is one dot on the screen.

1.2 %

.parent{
  width:200px;
  height:200px;
}

.child{
  width:50%;
  height:50%;
}
Try It Yourself

Note: % is relative to parent.

1.3 vw vh

.parent{
  width:200px;
  height:200px;
}

.child{
  width:50vw;
  height:50vh;
}
Try It Yourself

Note: vw vh are relative to viewport size.

1.4 vmax vmin

.parent{
  width:200px;
  height:200px;
}

.child{
  width:50vmin;
  height:50vmin;
}
Try It Yourself

Note: vmax = max(vw, vh) ; vmin = min(vw, vh);