Shrift hajmini chuqur tushunish (PX va EM va REM)

Shrift hajmini tushunish

Shriftning o'lchamlari Internetda juda muhim rol o'ynaydi, Shriftning o'lchami - bu css xususiyatlaridan biri, Shriftning o'lchami yoki matn hajmi veb-sahifada ko'rsatiladigan belgilarning kattaligini belgilaydi. Shrift odatda nuqtalarda (pt) o'lchanadi va odatda pikselda (px) aniqlanadi.

Har qanday veb-sahifaning asosiy shrift o'lchami (Body Font-size) 16px ni tashkil etadi, biz har qanday shaxsiy shrift o'lchamini aniqlamagunimizcha.
Shrift o'lchamidagi xususiyat quyidagi usullardan biri bilan ko'rsatilgan:

1. Mutlaq kattalik yoki nisbiy o'lcham
2. Uzunlik yoki foiz sifatida (asosiy elementning shrift o'lchamiga nisbatan)

Asosiy sintaksis

Shriftning asosiy sintaksisi

Mutlaq hajm
xx-kichik, x-kichik, kichik, xx-katta, x-katta, katta
Mutlaq o'lchamdagi kalit so'zlar bilan shrift o'lchami ota elementning shrift o'lchamiga nisbatan katta yoki kichikroq bo'ladi.

Nisbiy-o'lchov
kichikroq, kattaroq

Uzunlik o'lchami
Shrift uzunligi har doim ijobiy qiymatga ega bo'ladi, em va px kabi shrift nisbiy birliklari ishlatiladi

Foiz-Hajmi
Foiz bilan yozilgan shrift hajmi har doim ham ijobiy qiymatga ega bo'ladi va ota-elementning shrift o'lchamiga nisbatan

Tanadagi shrift hajmini aniqlang

Shriftning o'lchamini tanib olish har qanday veb-sahifani yaratishda eng yaxshi yondashuvdir. Tananing elementiga kalit so'zning shrift o'lchamini o'rnatish orqali siz sahifaning boshqa joylariga nisbatan shrift o'lchamlarini o'rnatishingiz mumkin, bu sizga shriftni mos ravishda butun sahifada yuqoriga yoki pastga o'lchash imkoniyatini beradi.

Pikselda shrift o'lchami (Px)

Pikselda shrift o'lchamini aniqlash yaxshi usul emas. agar siz pikselning mukammal dizaynini boshqarsangiz yaxshi bo'ladi.
 Pixel (px) - bu statik qiymat, px - bu OSdan mustaqil va o'zaro faoliyat brauzer bo'lib, brauzerlarga harflarni siz ko'rsatgan balandlikda piksellar sonida berishlarini aytadi. Natijalar brauzerlarda bir oz farq qilishi mumkin, chunki har bir brauzer shunga o'xshash effektga erishish uchun turli xil algoritm va yondashuvlardan foydalanadi.
 Shriftning o'lchamini pikselda (px) aniqlaganingizda, sahifani sezgir boshqarish uchun qo'shimcha css yozishga duch kelishingiz mumkin. va har bir tanaffusda cssni yozishingiz kerak.

Shrift o'lchami In EM

Shrift o'lchamini aniqlashning yana bir usuli - bu em qiymatlari. Em qiymatining hajmi dinamik. Agar biz shriftning o'lchamini belgilab olsak, bu ota-ona hajmiga bog'liq.
 agar biz ota-ona uchun shrift o'lchamini o'rnatmagan bo'lsak, u holda u brauzer shriftining o'lchamini oladi, ya'ni 16px.
 Em bilan bilish muhim bo'lgan narsa bu har doim ota-onaning shrift o'lchamiga bog'liq. Shunday qilib, agar siz shriftni ichki elementida belgilasangiz, unda shrift o'lchamini belgilashni yodingizda tuting.

Konversiyalash uchun piksel

REMdagi shrift o'lchami

Shrift o'lchamidagi rem qiymatlari ichki qism elementlari bilan em muammosini bartaraf etish uchun ixtiro qilingan.
 Shrift o'lchamidagi rem qiymatlari asosiy elementga emas, balki html elementiga nisbatan qo'llaniladi, qolgan har bir narsa em bilan bir xil.
 Agar ichki elementlar bo'lsa, rem va em o'rtasidagi farq quyida keltirilgan.

Ichki elementlar bilan EM va REM o'rtasidagi farq

EM bilan o'rnatilgan elementREM bilan ichki element

Taklif: https://developer.mozilla.org/en-US/docs/Web