em, rem, %, vh, vw bir-biridan nimasi bilan farq qiladi?

Savol

CSS'dagi em, rem, %, vh, vw o'lchov birliklari bir-biridan nimasi bilan farq qiladi?

Qisqa javob

Ularning barchasi nisbiy, ammo turli narsalarga nisbatan: em — ota shriftining o'lchamiga (yoki font-size bo'lmagan xususiyatlar uchun elementning o'ziniki), rem — root <html> elementining shrift o'lchamiga, % — otaning o'lchamiga (har bir xususiyat uchun o'ziniki), vh/vw — ko'rish oynasi (viewport)ning balandligi/kengligiga.

Batafsil javob

• em — font-size xususiyati uchun eng yaqin otaning font-sizeiga yoki padding, margin, width va h.k. uchun elementning o'ziga nisbatan. Shu sababli em to'planib boradi: agar font-size: 1.5emga ega elementlarni bir-birining ichiga joylashtirsak, o'lcham kaskadli tarzda o'sib boradi.
• rem ("root em") — joylashuvidan qat'i nazar, har doim <html> elementining font-sizeiga (standart holda 16px) nisbatan. Shu sababli rem emdan ko'ra bashorat qilinadigan bo'lib, odatda otstuplar va shrift o'lchamlari uchun afzal ko'riladi.
• % — otaning tegishli xususiyatiga nisbatan: width: 50% — ota kengligining yarmi, line-height: 150% — elementning o'zining shrift o'lchamining bir yarim baravari va h.k. "Ota"ning qiymati aniq CSS-xususiyatiga bog'liq.
• vh/vw — mos ravishda viewport (brauzer oynasining ko'rinadigan hududi) balandligi/kengligining 1%i. 100vh — ota konteynerlardan qat'i nazar, ekranning to'liq balandligi. Mobil brauzerlarda bir nuance bor: manzil satri haqiqiy balandlikni o'zgartirishi mumkin (shu sababli zamonaviy CSS'da dvh/svh/lvh paydo bo'lgan).

Misol

html { font-size: 16px; }

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;   /* 20px * 1.5 = 30px, otaga bog'liq */
  padding: 1.5rem;     /* 16px * 1.5 = 24px, doim html'dan */
  width: 50%;           /* .parent kengligining yarmi */
}

.hero {
  height: 100vh;        /* ekranning to'liq balandligi */
  width: 100vw;          /* ekranning to'liq kengligi */
}

Qo'shimcha savollar

• Nega ichma-ich joylashgan em shriftning kutilmagan "o'sib ketishi"ga olib kelishi mumkin?
• vh bilan yangi dvh/svh/lvh o'rtasida qanday farq bor?
• Moslashuvchan vyorstka uchun qachon %, qachon rem ishlatish kerak?