25-dars

O'zing nomla

1. rem nima?

rem — bu root element (html) font-size'iga nisbatan hisoblanadigan birlik.

📌 rem = root em

1️⃣ rem qayerdan keladi?

Brauzer default holatda:

html {
  font-size: 16px;
}

Demak:

1rem = 16px

2rem = 32px

0.5rem = 8px

👉 hamma joyda bitta manba

2️⃣ rem nimaga kerak?

Asosiy sabab:

butun UI'ni bitta joydan boshqarish

html {
  font-size: 16px;
}

Agar sen buni o'zgartirsang:

html {
  font-size: 18px;
}

👉 butun sayt kattalashadi

font

padding

margin

gap

Bu — responsive + accessibility.

3️⃣ rem vs px

px	rem
Qotib qolgan	Moslashuvchan
Accessibility yomon	Accessibility yaxshi
Global nazorat yo'q	Global nazorat bor

2. em nima?

em — bu elementning o'z font-size'iga nisbatan hisoblanadigan birlik.

📌 em = current font-size

1️⃣ Oddiy misol

.card {
  font-size: 16px;
}

.card p {
  font-size: 1.25em;
}

👉 Natija:

.card → 16px

p → 1.25 × 16 = 20px

2️⃣ Eng muhim nuqta

em har doim font-size bilan bog'liq,

lekin qaysi font-size — parentniki yoki o'ziniki — propertyga bog'liq

Misol:

.card {
  font-size: 20px;
}

.card {
  padding: 1em;
}

👉 Bu yerda:

1em = 20px

padding font-size'dan kelib chiqyapti

3️⃣ Nega bu xavfli bo'lishi mumkin?

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.2em; /* 24px */
  padding: 1.5em;   /* 36px */
}

👉 Natija:

font kattalashdi

padding yana ko'proq kattalashdi

nesting bo'lsa → kaskad portlaydi 💣

Shuning uchun em:

chuqur layoutda xavfli

global spacingda yomon tanlov

Tez taqqoslash

Holat	rem	em
Global spacing	✅	❌
Component scaling	😐	✅
Predictable	✅	❌
Accessibility	✅	✅

3. clamp() nima va nega kuchli?

clamp() — qiymatni min va max orasida avtomatik ushlab turadigan CSS funksiyasi.

Bir jumlada:

kichikda kichik, kattada katta, lekin nazorat bilan

1️⃣ Sintaksis (eng muhim)

clamp(MIN, IDEAL, MAX)

Misol:

font-size: clamp(16px, 4vw, 24px);

Bu degani:

• 16px dan kichik bo'lmaydi
• 24px dan katta bo'lmaydi
• orasida esa 4vw bo'yicha o'sadi

2️⃣ clamp() qaysi muammoni hal qiladi?

Oldin ❌:

h1 {
  font-size: 20px;
}

@media (min-width: 768px) {
  h1 {
    font-size: 28px;
  }
}

Hozir ✅:

h1 {
  font-size: clamp(20px, 4vw, 28px);
}

👉 Media query yo'q 👉 Smooth scaling 👉 Toza CSS

3️⃣ clamp() vs media query

Holat	clamp()	media query
Smooth scaling	✅	❌
Kam kod	✅	❌
Murakkab layout	❌	✅
Typography	🔥	😐