CSS o‘lchov birliklari: px, em, rem, %, vw va vh

Qisqa javob

CSS da atrof-muhitga bog‘liq bo‘lmagan absolyut birliklar va boshqa narsadan — shrift, ota element yoki brauzer oynasidan hisoblanadigan nisbiy birliklar bor.

Muhim: CSS-piksel ekranning jismoniy nuqtasi emas. Zichligi yuqori ekranlarda bitta px bir nechta jismoniy pikselni egallaydi, shuning uchun 16px noutbukda ham, telefonda ham taxminan bir xil ko‘rinadi.

rem va em: farqi va em qanday yig‘iladi

Brauzerlarda ildiz shrift odatda 16px, demak 1rem = 16px. Foydalanuvchi brauzer sozlamalarida shriftni kattalashtirsa, rem dagi barcha o‘lchamlar ham kattalashadi — bu foydalanish qulayligi uchun ortiqcha. px dagi o‘lchamlar bu sozlamani e’tiborsiz qoldiradi.

rem doim bitta joydan — html dan hisoblanadi. em eng yaqin kontekstdan hisoblanadi va ichma-ich joylashganda qiymatlar ko‘paytiriladi:

.menu { font-size: 1.2em; }

<ul class="menu">        <!-- 16 × 1.2 = 19.2px -->
  <li>
    <ul class="menu">    <!-- 19.2 × 1.2 = 23.04px -->
      <li>Band</li>
    </ul>
  </li>
</ul>

Har bir ichki daraja kattaroq bo‘ladi — «tushunarsiz darajada katta» matnning ko‘p uchraydigan sababi. 1.2rem bilan barcha darajalar bir xil bo‘lardi.

Shunga qaramay, em o‘lcham matnga ergashishi kerak bo‘lgan joyda foydali: tugmadagi padding: 0.5em 1em uning font-size i o‘zgarsa ham proporsiyani saqlaydi.

Foizlar: aynan nimadan

% deyarli har doim ota blokdan hisoblanadi, lekin nozikliklar bor:

• width: 50% — ota element kengligining yarmi.
• height: 50% faqat ota elementda balandlik berilgan bo‘lsa ishlaydi.
• Foizdagi padding va margin, hatto vertikal bo‘lsa ham, ota element kengligidan hisoblanadi.
• font-size: 120% — 1.2em bilan bir xil.

vw, vh va mobildagi 100vh muammosi

1vw — oyna kengligining 1%, 1vh — balandligining 1%. height: 100vh aynan bitta ekranni beradigandek tuyuladi. Desktopda shunday, lekin mobil brauzerlarda manzil satri va panellar goh paydo bo‘ladi, goh yashirinadi. vh odatda panellar yashirin holatdagi oyna balandligiga teng, shuning uchun manzil satri ko‘ringanda blokning pastki qismi chetdan chiqib ketadi va ekran pastidagi tugma ko‘rinmay qoladi.

Zamonaviy birliklar muammoni hal qiladi:

• svh — barcha panellar ko‘ringandagi kichik oyna balandligi. Blok albatta sig‘adi.
• lvh — panellar yashiringandagi katta balandlik (eski vh kabi).
• dvh — panellar bilan birga o‘zgaradigan dinamik balandlik.

.hero {
  min-height: 100vh;   /* eski brauzerlar uchun zaxira */
  min-height: 100svh;  /* mobilda ishonchli sig‘adi */
}

dvh aniqroq, lekin aylantirganda blok balandligi o‘zgarib, «sakrashi» mumkin. Birinchi ekran uchun ko‘pincha svh, to‘liq ekranli modal oynalar uchun dvh tanlanadi.

Yana bir tuzoq: desktopda 100vw aylantirish chizig‘i kengligini ham o‘z ichiga oladi, shuning uchun width: 100vw gorizontal skroll chiqarishi mumkin. To‘liq kenglik uchun odatda width: 100% yetarli.

Amaliy qoida

• Shriftlar — rem da. Ekran bilan birga o‘sadigan sarlavhalar uchun clamp(): font-size: clamp(2rem, 5vw, 4rem).
• Oraliqlar va komponent o‘lchamlari — rem da, matnga bog‘liq ichki oraliqlar — em da.
• Joylashuv — %, grid dagi fr, flexbox; px dagi qat’iy kenglik faqat max-width sifatida.
• Ramkalar, soyalar, ingichka chiziqlar — px da.
• Ekran balandligi — zaxira vh bilan svh yoki dvh.

Ko‘p uchraydigan xatolar

• Ichma-ich komponentlarda font-size ni em da berib, yig‘ilish olish.
• Matnli blokka px da qat’iy height berish — shrift kattalashganda matn chetdan chiqadi.
• Mobilda birinchi ekran uchun svh siz 100vh.
• «Qulay» rem hisobi uchun ildiz o‘lchamni 62.5% qilish va bu tashqi komponentlarni buzishini unutish.