CSS matematik funksiyalari: calc(), min(), max() va clamp()

Qisqacha: CSS o'zi hisoblay oladi. Masalan, calc(100% - 2rem) turli birliklarni bitta ifodada aralashtiradi; + va - atrofida bo'sh joy majburiy, aks holda brauzer qatorni tashlab ketadi. Funksiya min(100%, 24rem) ikkisidan kichigini oladi — "ko'pi bilan 24rem", max(1rem, 4vw) esa kattasini — "kamida 1rem". Uchinchisi, clamp(1.75rem, 1rem + 3vw, 3rem), o'lchamni ekran bilan o'stiradi, lekin chegaradan chiqarmaydi. Bular bilan ko'p joyda media query'siz moslashuvchan sahifa qilish mumkin.

Bu darsda

• calc() bilan %, rem va vw ni bitta hisobda aralashtirasiz.
• + va - atrofidagi bo'sh joy qoidasini bilasiz va xatoni topasiz.
• min() ni "ko'pi bilan", max() ni "kamida" deb o'qiysiz.
• clamp() bilan ekran eniga qarab silliq o'sadigan sarlavha yozasiz va uning qiymatini hisoblaysiz.
• round(), mod(), abs() va trigonometrik funksiyalar nima qilishini bilasiz.

Oldin bilishingiz kerak: O'lcham birliklari, Viewport birliklari, Ranglar 1.

1. Nega bu kerak?

O'tgan darsda ranglarni, undan oldin esa birliklarni o'rgandik. Bugun birliklarga qaytamiz — endi ularni bir-biri bilan hisoblaymiz.

«Bahor» menyusidagi aksiya lentasi sahifa bo'ylab cho'zilsin, lekin o'ng tomonda 4rem bo'sh joy qolsin — u yerga keyinroq yopish tugmasi qo'yiladi. Telefonda ham, kompyuterda ham. % yozsak — bo'sh joy ekranga qarab o'zgaradi. rem yozsak — lentaning o'zi qotib qoladi. Bizga "butun en minus 4rem" kerak.

Ikkinchi vazifa. Viewport birliklari darsida ko'rdik: sarlavhani faqat vw da bersak, telefonda mayda, kompyuterda ulkan bo'ladi, zoom'ga ham javob bermaydi. Bizga "ekran bilan o'ssin, lekin 28 pikseldan kichik va 48 pikseldan katta bo'lmasin" kerak.

Taksi narxini eslang. "Narx — masofaga qarab, lekin kamida 12 000 so'm." Bu hisob: ikki sondan kattasini olish. CSS'da ham xuddi shunday hisob-kitoblar bor — ular matematik funksiyalar deyiladi.

Funksiya so'zi sizga Ranglar 1 darsidan tanish: rgb(47 107 58) ham funksiya edi. CSS'da funksiya — nomdan keyin qavs keladigan qiymat. Qavs ichiga ma'lumot berasiz, brauzer uning o'rniga tayyor natijani qo'yadi. Xuddi kalkulyator kabi: sonlarni kiritasiz, javobni olasiz.

2. calc() — hisoblash

2.1 Birliklarni aralashtirish

calc() qavs ichidagi ifodani — 100% - 4rem kabi hisob yozuvini — hisoblaydi. Uning asosiy kuchi — turli birliklarni qo'shish va ayirish:

<style>
  h1 {
    font-size: calc(1rem + 2vw);
    color: #2f6b3a;
  }
  .aksiya {
    width: calc(100% - 4rem);
    background-color: #b4461a;
    color: #fffaf0;
  }
</style>
<h1>Choyxona «Bahor»</h1>
<p class="aksiya">Bugun ko'k choy — bepul!</p>

Telefon va kompyuter tugmalarini almashtiring. Nimaga qarang:

• Aksiya lentasi o'ngda doim bir xil — 64 piksellik (4rem) bo'sh joy qoldiradi. Telefonda lenta 280 piksel (344 − 64), kompyuterda 1200 piksel (1264 − 64). 344 va 1264 — body ning ichki eni: ekran eni minus ikki tomondagi 8 piksellik margin.
• Sarlavha ekran bilan o'sadi: telefonda 23.2 piksel (16 + 360 × 2%), kompyuterda 41.6 piksel (16 + 1280 × 2%).

Sarlavhadagi 1rem + qismi muhim. Viewport birliklari darsidagi muammoni eslang: faqat vw dagi matn zoom va shrift sozlamasiga javob bermaydi. Endi matnning bir qismi rem — foydalanuvchi shriftni kattalashtirsa, sarlavha ham kattalashadi.

Brauzer calc() ni oxirgi daqiqada, sahifa chizilayotganda hisoblaydi. U paytda 100% ham, 1rem ham, 2vw ham pikselda ma'lum bo'ladi. Shuning uchun CSS fayl yozayotganda buni o'zingiz oldindan hisoblay olmaysiz — brauzer esa har ekranda qayta hisoblaydi.

2.2 Bo'sh joy qoidasi

+ va - belgilarining ikkala tomonida bo'sh joy bo'lishi shart. Uch xil yozuvni solishtiramiz:

<style>
  p {
    outline: 2px solid #b4461a;
    width: 50%;
  }
  p + p {
    width: calc(100%-4rem);
  }
  p + p + p {
    width: calc(100% - 4rem);
  }
</style>
<p>width: 50%</p>
<p>calc(100%-4rem)</p>
<p>calc(100% - 4rem)</p>

Nimaga qarang: ikkinchi paragraf yarim enda qoldi — xuddi birinchisidek. Uning calc(100%-4rem) qatori bo'sh joysiz yozilgan va brauzer uni butunlay tashlab ketdi. Tashlangan qator o'rniga yuqoridagi width: 50% ishladi. Uchinchisi — to'g'ri yozilgani: deyarli butun en.

Nega shunday qat'iy? Brauzer 100%-4rem ni "100% va manfiy 4rem" deb o'qiydi — ikki son yonma-yon turibdi, orada amal belgisi yo'q. CSS'da -4rem — manfiy son, - esa nomlarda ham uchraydi (font-size). Bo'sh joy "bu ayirish belgisi" degan yagona ishora. Chrome'da tekshirdik: calc(100%-4rem), calc(100% -4rem) va calc(100%- 4rem) — uchalasi ham tashlanadi. Xato xabari chiqmaydi — CSS nima darsidagi "jim tashlash".

* va / uchun bo'sh joy shart emas: calc(2*1rem) ham ishlaydi. Lekin o'qish oson bo'lishi uchun doim bo'sh joy qo'ying.

2.3 Ko'paytirish va bo'lish

Ko'paytirishda ikki qiymatdan bittasi birliksiz son bo'lishi kerak, bo'lishda esa bo'luvchi:

.taom-karta {
  width: calc(100% / 3);      /* uchdan bir */
  padding: calc(1rem * 1.5);  /* 1.5rem */
  margin-top: calc(3 * 1rem); /* songa birlik "berish": 3rem */
}

Oxirgi qator — foydali hiyla: birliksiz son 1rem ga ko'paytirilsa, rem ga aylanadi. Bu CSS o'zgaruvchilari — qiymatni nom bilan saqlash — bilan ishlaganda ko'p kerak bo'ladi. O'zgaruvchilarni keyingi darsda, bu hiylani esa CSS o'zgaruvchilari 2 darsida o'rganamiz — hozir bilish shart emas.

Ikki xato holat:

• calc(10px * 2px) — "piksel ko'paytiruv piksel" CSS'da ma'nosiz, qator tashlanadi.
• calc(100% - 20) — foizdan birliksiz sonni ayirib bo'lmaydi. Chrome'da tekshirdik: bu ham tashlanadi. To'g'risi: calc(100% - 20px).

Qavslar oddiy matematikadagidek ishlaydi: calc((100% - 2rem) / 3) — avval ayirish, keyin bo'lish.

2.4 Qayerda ishlatsa bo'ladi?

Matematik funksiyalar qiymat o'rnida turadi — son, uzunlik, foiz yoki burchak qabul qiladigan istalgan xususiyatda: width, padding, margin, font-size, border-width. Selektor yoki xususiyat nomi o'rnida esa ishlamaydi.

Funksiyalarni bir-birining ichiga ham qo'yish mumkin. clamp() ichida min(), min() ichida hisob — hammasi ruxsat. Lekin bitta qiymatga uch-to'rt qavat funksiya yozsangiz, ertaga o'zingiz ham o'qiy olmaysiz. Oddiy qoidaga amal qiling: bitta qator — bitta fikr.

Tekshirib ko'ring: Ota element 600px keng, html shrifti 16px. width: calc(50% + 2rem) necha piksel? width: calc(50%+2rem)-chi?

3. min() va max() — chegaralash

3.1 min() — kichigini oladi

min() vergul bilan ajratilgan qiymatlardan eng kichigini tanlaydi. Uni "ko'pi bilan" deb o'qing:

.taom-karta {
  width: min(100%, 24rem); /* ko'pi bilan 24rem */
}

Tor telefonda 100% kichikroq — karta butun enni oladi. Keng ekranda 24rem kichikroq — karta 24rem da to'xtaydi. Ya'ni 24rem — yuqori chegara.

Xuddi shu natijani ikki qator bilan ham olish mumkin: width: 100%; max-width: 24rem;. max-width — elementning eng katta eni, uni O'lchamlar darsida o'rganamiz. Ikkala yo'l ham to'g'ri. min() ikkalasini bitta qatorga yig'adi va chegara bilan birga hisob ham yozish imkonini beradi.

3.2 max() — kattasini oladi

max() esa eng kattasini tanlaydi — "kamida":

main {
  padding: 8px max(1rem, 4vw); /* chetlarda kamida 1rem */
}

Keng ekranda 4vw kattaroq — chetdagi bo'sh joy ekran bilan o'sadi. Tor telefonda 4vw juda kichik bo'lib qoladi, shunda 1rem ishlaydi. 1rem — pastki chegara.

Ikkalasi birga:

<style>
  body {
    margin: 0;
  }
  main {
    padding: 8px max(1rem, 4vw);
    background-color: #fffaf0;
  }
  .taom-karta {
    width: min(100%, 24rem);
    outline: 2px solid #2f6b3a;
  }
  h3 {
    margin: 0;
    padding: 8px;
  }
</style>
<main>
  <article class="taom-karta">
    <h3>Osh — 35 000 so'm</h3>
  </article>
</main>

Nimaga qarang:

• Telefonda (360px): chetlarda 16 piksel — 4vw atigi 14.4 piksel bo'lardi, max() uni 1rem gacha ko'tardi. Karta qolgan butun enni egallaydi: 328 piksel.
• Kompyuterda (1280px): chetlar 51.2 piksel (4vw), karta esa 384 piksel (24rem) da to'xtadi.

3.3 Teskari o'qilishi — eslab qolish usuli

Bu yerda boshlovchilar ko'p adashadi: "yuqori chegara" uchun max deb yozib yuborishadi. Nomlar tanlov haqida, chegara haqida emas:

Taksi misoli: narx = max(12 000, masofa × 3 000) — ikkisidan kattasi, ya'ni "kamida 12 000 so'm". Chegirma = min(narx × 20%, 50 000) — kichigi, ya'ni "ko'pi bilan 50 000 so'm". Qaysi funksiya kerakligini chegaraning turidan bilasiz: "kamida" — max, "ko'pi bilan" — min.

Qiymatlar ikkitadan ko'p ham bo'lishi mumkin: min(100%, 60ch, 40rem) — uchalasidan eng kichigi. Ichida hisob ham yozsa bo'ladi, calc siz: min(100% - 2rem, 70ch).

Tekshirib ko'ring: Tugma balandligi kamida 44 piksel bo'lsin, lekin shrift katta bo'lsa, undan ham baland bo'lsin. min-height: min(44px, 3em) to'g'rimi?

4. clamp() — ikki tomondan chegara

4.1 Uchta qiymat

clamp() uchta qiymat oladi: eng kichik, ideal, eng katta. Ideal qiymat chegaralar ichida bo'lsa — u ishlaydi. Undan chiqib ketsa — yaqin chegara olinadi.

h1 {
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}

O'qilishi: "sarlavha 1rem + 3vw bo'lsin, lekin kamida 1.75rem va ko'pi bilan 3rem". Aslida bu max(1.75rem, min(1rem + 3vw, 3rem)) ning qisqa yozuvi. Ideal qiymatdagi hisob uchun calc yozish shart emas — clamp() ichida matematika o'zi ishlaydi.

Brauzer har ekranda shu uch qadamni bajaradi:

flowchart TD
  I["Ideal qiymatni hisobla:<br/>1rem + 3vw"] --> K{"Eng kichikdan<br/>(1.75rem) kichikmi?"}
  K -->|"ha"| A["1.75rem olinadi"]
  K -->|"yo'q"| M{"Eng kattadan<br/>(3rem) kattami?"}
  M -->|"ha"| B["3rem olinadi"]
  M -->|"yo'q"| C["Idealning o'zi olinadi"]

<style>
  h1 {
    font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
    color: #2f6b3a;
  }
</style>
<h1>Choyxona «Bahor»</h1>
<p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>

Uchala tugmani ham bosing. Sarlavha har ekranda boshqacha — va bunga bitta ham shart yozmadik. "Ekran shundan keng bo'lsa" degan shartlar — media query'lar — Media queries darsida keladi. Ular o'lchamni sakrab o'zgartiradi: 767 pikselda bir o'lcham, 768 da boshqasi. clamp() esa silliq o'zgartiradi — har piksel ekran eni bilan birga.

Hisoblaymiz (1rem = 16px):

Nimaga qarang: telefonda sarlavha 28 pikseldan kichraymadi — 1.75rem uni ushlab turdi. Planshetda ideal qiymat chegaralar ichida, u ishladi. Kompyuterda 54.4 bo'lardi, lekin 3rem — 48 pikselda to'xtatdi. DevTools'da (DevTools'da CSS) Styles tabi yozilgan clamp(...) ni, Computed tabi esa hisoblangan pikselni ko'rsatadi.

4.2 Ideal qiymatda rem + vw

Nega ideal qiymat 1rem + 3vw, faqat 4vw emas? Viewport birliklari darsidagi hisobni eslang: zoom'da vw "qisqaradi". Hisoblab ko'ramiz — kompyuter oynasi 1280 piksel:

• Zoom 100%: ideal 54.4px, chegara bo'yicha 48px.
• Zoom 200%: oynaga 640 CSS piksel sig'adi. Ideal: 16 + 640 × 3% = 35.2 CSS piksel. Har CSS piksel ekranda ikki barobar — 70.4 haqiqiy piksel.

Zoom bosildi — sarlavha kattalashdi. rem qismi bo'lmasa, u 28 dan 48 gacha bo'lgan chegaralarda qolib ketardi. rem qismi foydalanuvchi shrift sozlamasiga ham javob beradi (O'lcham birliklari).

Chegaralarni juda keng qo'ysangiz, bu himoya zaiflashadi. Chegaralar va ideal qiymatni aniq hisoblash formulasini Fluid tipografiya darsida o'rganamiz.

4.3 Chegaralar teskari bo'lsa

clamp(3rem, 2vw, 1rem) — eng kichigi eng kattasidan katta. Chrome'da tekshirdik: natija 48px — eng kichik chegara yutadi. Bu xato yozuv, lekin brauzer uni tashlamaydi — shuning uchun sezish qiyin. Tartibni eslab qoling: kichik, ideal, katta.

Tekshirib ko'ring: font-size: clamp(1rem, 2vw + 0.5rem, 2rem). Ekran 360, 768 va 1280 piksel bo'lganda shrift necha piksel?

<style>
  p {
    font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
  }
</style>
<p>Rustam aka oshni har kuni ertalab damlaydi.</p>

5. Yangiroq funksiyalar

calc, min, max va clamp — kundalik ish qurollari. CSS'da yana bir nechta matematik funksiya bor. Ular kamroq kerak bo'ladi, lekin ba'zi vazifani bir qatorda yechadi.

Bu bo'limni yodlash shart emas. Maqsad — boshqa birovning kodida round() yoki sin() ni ko'rganingizda "bu nima?" deb qo'rqmaslik.

5.1 round(), mod(), rem() — yaxlitlash va qoldiq

.taom-karta {
  width: round(37px, 8px);       /* 40px — 8 ga karrali eng yaqin */
  height: round(down, 37px, 8px); /* 32px — pastga yaxlitlash */
  margin-left: mod(-18px, 5px);  /* 2px */
  margin-right: rem(-18px, 5px); /* -3px */
}

• round(qiymat, qadam) — qiymatni qadamga karrali (qadamga qoldiqsiz bo'linadigan) eng yaqin songa yaxlitlaydi. Dizayn "8 piksellik to'r" bo'yicha qurilganda qulay: hamma o'lcham 8 ga bo'linadi. Birinchi so'z yo'nalishni aytadi: up — yuqoriga, down — pastga, to-zero — nolga qarab. Yozilmasa — eng yaqiniga.
• mod() va rem() — bo'lishdagi qoldiq. Musbat sonlarda ikkalasi bir xil: 18 ni 5 ga bo'lsak, qoldiq 3. Manfiy sonlarda farq qiladi: mod() natijasi bo'luvchi ishorasini oladi (2), rem() esa bo'linuvchinikini (−3).

Izohdagi hamma natijalar Chrome'da tekshirilgan.

Diqqat: rem() funksiyasi va rem birligi — butunlay boshqa narsalar. 2rem — "ildiz shriftining ikki barobari", rem(18px, 5px) — "18 ni 5 ga bo'lgandagi qoldiq". Nomlari bir xil bo'lib qolgani — tasodif: birinchisi "root em", ikkinchisi inglizcha remainder (qoldiq) so'zidan.

Baseline: round(), mod() va rem() 2024-yil mayidan beri hamma asosiy brauzerda — bu yangi Baseline. Eski brauzerlar ularni tushunmaydi va qatorni tashlab ketadi. Shuning uchun oldidan zaxira qator yozing:

.taom-karta {
  width: 40px;             /* eski brauzer uchun */
  width: round(37px, 8px); /* tushungan brauzer shuni oladi */
}

Tekshirib ko'ring: round(up, 50px, 16px) va round(50px, 16px) necha piksel bo'ladi?

5.2 abs() va sign()

abs(-20px) — 20px: sonning ishorasiz qiymati. sign(-5px) — −1: son manfiymi (−1), musbatmi (1) yoki nolmi (0). Ular CSS o'zgaruvchilari bilan qiymati oldindan noma'lum bo'lgan hisoblarda kerak bo'ladi. Baseline: 2025-yil iyunidan beri hamma asosiy brauzerda — bu ham yangi, eski brauzerlarda ishlamaydi.

5.3 Trigonometriya: sin(), cos() va boshqalar

Maktabdagi sinus va kosinus CSS'da ham bor. Burchak berasiz, son olasiz:

.taom-karta {
  width: calc(sin(30deg) * 200px);  /* 0.5 × 200 = 100px */
  height: calc(cos(60deg) * 200px); /* 0.5 × 200 = 100px */
}

deg — gradus birligi. Bu funksiyalar elementlarni doira bo'ylab joylashtirishda ishlatiladi — masalan, taomlar ro'yxatini aylana shaklida. Buning uchun elementni surish kerak, uni animatsiya darslarida ko'rasiz. Yana tan(), asin(), acos(), atan() va atan2() bor. pi kalit so'zi esa maktabdagi 3.14159… sonining o'zi: calc(pi * 10px).

Baseline: trigonometrik funksiyalar 2023-yil martidan beri hamma asosiy brauzerda, hozir "keng tarqalgan" holatida. Xuddi shunday pow(), sqrt(), hypot(), log(), exp() — darajaga ko'tarish, ildiz va logarifm; ular 2023-yil oxiridan beri hamma joyda.

6. Ko'p uchraydigan xatolar

6.1 + yoki - atrofida bo'sh joy yo'q

calc(100%-2rem) — jim tashlanadi. Tuzatish: calc(100% - 2rem). Prettier bu yerda yordam bermaydi — tekshirdik: u 2*1rem ni 2 * 1rem qiladi, lekin 100%-2rem ga tegmaydi. Tekshirish sizning vazifangiz.

6.2 Birliksiz son qo'shildi

calc(100% - 20) — tashlanadi. Tuzatish: birlikni yozing: 20px. Birlik faqat * va / dagi ko'paytuvchi va bo'luvchida bo'lmaydi.

6.3 min va max adashtirildi

"Ko'pi bilan 600px" uchun max(100%, 600px) — element doim kamida 600 piksel bo'ladi va telefonda ekrandan chiqib ketadi. Tuzatish: "ko'pi bilan" — min(), "kamida" — max().

6.4 clamp() ichida faqat vw

clamp(1rem, 4vw, 3rem) — chegaralar ichida matn zoom'ga javob bermaydi. Tuzatish: ideal qiymatga rem qo'shing: 1rem + 3vw.

6.5 Keraksiz calc()

width: calc(50%) yoki calc(16px) — hisoblaydigan narsa yo'q. Xato emas, lekin kodni o'qishni qiyinlashtiradi. Tuzatish: 50%, 16px.

7. Mashqlar

1-mashq (oson): Natijani hisoblang

Ota element 600px keng, viewport 800px, html shrifti 16px:

• width: calc(100% - 2rem) → px
• width: min(100%, 30rem) → px
• width: max(50%, 20rem) → px
• font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem) → px

Ishora: % — ota enidan, vw — viewport enidan (O'lcham birliklari, Viewport birliklari).

2-mashq (o'rta): Menyu kartasi

«Bahor» menyusidagi taom kartasi uchun CSS yozing:

1. Karta eni: telefonda butun en, keng ekranda ko'pi bilan 22rem.
2. Taom nomi (.taom-nomi) shrifti: ekran bilan o'ssin, 1.25rem dan 1.75rem gacha. Ideal qiymatda rem qismi bo'lsin.
3. Narx (.narx) — urg'u rangida (#b4461a).

Ishora: 1-band — min(), "ko'pi bilan" (yuqoridagi «min() — kichigini oladi» bo'limi). 2-band — clamp() va 1rem + 1vw kabi ideal qiymat («Ideal qiymatda rem + vw» bo'limi).

<style>
  .taom-karta {
    width: min(100%, 22rem);
    outline: 2px solid #2f6b3a;
  }
  .taom-nomi {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    margin: 0;
    padding: 8px;
  }
  .narx {
    color: #b4461a;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Lag'mon</h3>
  <p>Qo'lda cho'zilgan — <span class="narx">28 000 so'm</span></p>
</article>

3-mashq (qiyin): Stajyorning "moslashuvchan" sahifasi

Stajyor shunday CSS yozdi. Telefonda sahifa gorizontal suriladi, sarlavha zoom'da kattalashmaydi, aksiya lentasi esa hech qachon qisqarmaydi:

.aksiya {
  width: calc(100%-2rem);
}
main {
  width: max(100%, 40rem);
}
h1 {
  font-size: clamp(3rem, 5vw, 2rem);
}

1. Uchta qatordagi xatolarni toping va nima bo'lishini tushuntiring.
2. To'g'ri yozing: main — ko'pi bilan 40rem; sarlavha — 1.75rem dan 2.5rem gacha, zoom'ga javob beradigan.

Ishora: har qatorni ovoz chiqarib o'qing: "kamida" yoki "ko'pi bilan"? Bo'sh joy? Chegaralar tartibi? vw yolg'izmi?

.aksiya {
  width: calc(100% - 2rem);
}
main {
  width: min(100%, 40rem);
}
h1 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

4-mashq: Portfolio qadami — markazdagi ustun va o'sadigan sarlavha

Keng monitorda portfoliongiz matni chapdan o'ngga butun ekran bo'ylab cho'zilgan. Bu darsdagi funksiyalar bilan tartibga keltiring:

1. header, main va footer — bitta ustun: eni ko'pi bilan 70ch, telefonda esa chetlardan 1rem dan bo'sh joy qolsin. Ustun sahifa o'rtasida tursin.
2. h1 shrifti ekran bilan o'ssin: 1.75rem dan 2.5rem gacha.
3. Hamma sahifani telefon (360px) va kompyuter (1280px) enida tekshiring. Chrome'da shrift sozlamasini Large qilib ham ko'ring (O'lcham birliklari).

Ishora: 1-band uchun min() ichida ayirish: min(100% - 2rem, 70ch). Blokni o'rtaga qo'yish: margin: 0 auto — chap va o'ng tashqi bo'sh joyni brauzer teng bo'lib beradi. auto margin'ni Margin sirlari darsida to'liq o'rganamiz.

/* Sahifaning markaziy ustuni */
header,
main,
footer {
  width: min(100% - 2rem, 70ch);
  margin: 0 auto;
}

/* Ekran bilan o'sadigan sarlavha */
h1 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  header,
  main,
  footer {
    width: min(100% - 2rem, 70ch);
    margin: 0 auto;
  }
  h1 {
    color: #1f6f4a;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  }
</style>
<header>
  <p><a href="./">Aziz Karimov</a></p>
</header>
<main id="asosiy">
  <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
  <p>Veb-saytlarni noldan o'rganyapman. Hozir HTML'ni to'liq
  bilaman: semantika, formalar, accessibility va SEO.
  Keyingi qadam — CSS.</p>
</main>

8. Real ishda

• Konteyner — width: min(100% - 2rem, 1200px); margin: 0 auto; — deyarli har zamonaviy saytda bor. Bir qator bilan telefon va kompyuter uchun to'g'ri en.
• Fluid tipografiya — shrift va masofalarni clamp() bilan berish. Utopia kabi vositalar chegaralarni avtomatik hisoblaydi. Buni Fluid tipografiya darsida o'rganamiz. Media query'lar esa Media queries darsida — clamp() ularning bir qismini keraksiz qiladi.
• Dizayn tizimlari o'lchamlarni o'zgaruvchilarda saqlab, calc() bilan ko'paytiradi: calc(var(--qadam) * 3). Buni CSS o'zgaruvchilari darsidan keyin ko'rasiz.
• Intervyuda so'raladi: "clamp() nima qiladi?", "min() va max() farqi?", "calc(100%-10px) nega ishlamaydi?". Bu darsdan keyin uchalasiga javob bera olasiz.

Xulosa

• calc() turli birliklarni bitta hisobda aralashtiradi; + va - atrofida bo'sh joy majburiy, aks holda qator jim tashlanadi.
• Ko'paytirishda bitta qiymat, bo'lishda bo'luvchi birliksiz son bo'ladi. calc(3 * 1rem) sonni birlikka aylantiradi.
• min() — kichigi, "ko'pi bilan"; max() — kattasi, "kamida". Nomni emas, chegaraning turini o'ylang.
• clamp(kichik, ideal, katta) — ideal qiymat chegaralar ichida ushlanadi. Idealda rem + vw — zoom va shrift sozlamasi ishlaydi.
• round(), mod(), rem(), abs(), sign() — yangi Baseline, zaxira bilan ishlating. Trigonometrik funksiyalar hamma joyda ishlaydi.

Keyingi dars: CSS o'zgaruvchilari 1 — ranglar va o'lchamlarni --nom bilan bir joyda saqlaymiz va butun sahifada qayta ishlatamiz.

Manbalar

• MDN: "calc()", "min()", "max()", "clamp()", "round()", "mod()", "rem()", "CSS math functions" — developer.mozilla.org
• W3C: "CSS Values and Units Module Level 4", "Mathematical Expressions" bo'limi — w3.org/TR/css-values-4
• web.dev: "Learn CSS — Functions" — web.dev/learn/css/functions
• web-features (Baseline ma'lumotlari): "round(), mod(), and rem()", "abs() and sign()", "Trigonometric functions" — github.com/web-platform-dx/web-features