CSS / CSS функцүүд (calc, clamp, min)

CSS функцүүд (calc, clamp, min)

CSS-д тоог зөвхөн бичиж өгдөг байснаас хэтэрч, одоо тооцоолол хийх боломжтой болсон. calc(), min(), max(), clamp() нь уян хатан, responsive дизайны чухал хэрэгсэл.

calc() — тооцоолол

Нэг property-д өөр өөр нэгжийг хольж тооцоолно:

css

.элемент {
  width: calc(100% - 48px);
}

+, -, *, / дөрвөн үйлдэл хийнэ:

css

.хайрцаг {
  width: calc(100% - 2rem);
  height: calc(50vh - 80px);
  padding: calc(16px * 1.5);
  font-size: calc(14px + 2px);
}

Чухал: + ба - хоёр талд зай заавал бичнэ:

css

/* БУРУУ */
.буруу {
  width: calc(100%-48px);
}

/* ЗӨВ */
.зөв {
  width: calc(100% - 48px);
}

CSS variable-тай хослуулах

css

:root {
  --sidebar-өргөн: 240px;
  --gap: 24px;
}

.гол-агуулга {
  width: calc(100% - var(--sidebar-өргөн) - var(--gap));
}

Бодит жишээ

css

/* Navbar-ийн өндрийг хасаад бүтэн дэлгэц */
.агуулга {
  min-height: calc(100vh - 64px);
}

/* Grid хэсэгт gap тооцсон өргөн */
.колонк {
  width: calc(33.333% - 16px);
}

/* Padding-ийг тооцсон өргөн */
.чингэлэг {
  width: calc(100% - 48px);
  max-width: 1200px;
  margin: 0 auto;
}

min() — хамгийн жижигийг сонгох

Өгсөн утгуудаас хамгийн жижгийг авна:

css

.элемент {
  width: min(утга1, утга2);
}

css

/* 500px эсвэл 100%-ийн жижгийг — дэлгэц жижиг бол 100% авна */
.хайрцаг {
  width: min(500px, 100%);
}

/* max-width шиг, гэхдээ илүү уян */
.чингэлэг {
  width: min(1200px, 100% - 48px);
}

min() нь responsive container хийхэд маш тохиромжтой — max-width + width: 100%-ийн оронд нэг мөрт бичнэ.

max() — хамгийн томыг сонгох

Өгсөн утгуудаас хамгийн томыг авна:

css

.элемент {
  font-size: max(утга1, утга2);
}

css

/* 16px-ийн доош бүү бага болго */
.текст {
  font-size: max(16px, 2vw);
}

/* Доод хязгаар тодорхойлох */
.padding {
  padding: max(16px, 4vw);
}

clamp() — хязгаарт утга

Гурван утга авна: хамгийн бага, суурь, хамгийн их:

css

.элемент {
  property: clamp(доод-хязгаар, суурь-утга, дээд-хязгаар);
}

css

/* Фонт: 14px-аас бага болохгүй, 18px-аас их болохгүй */
.текст {
  font-size: clamp(14px, 2vw, 18px);
}

Дэлгэц жижигрэх тусам 2vw буурна → 14px-д хүрэхэд цааш буурахгүй. Дэлгэц томрох тусам 2vw нэмэгдэнэ → 18px-д хүрэхэд цааш нэмэгдэхгүй.

Fluid typography — clamp()-ын хамгийн алдартай хэрэглээ

Дэлгэцийн хэмжээтэй хамт фонт аажим өөрчлөгдөнө:

css

/* Гарчиг: 24px — 48px хооронд уян */
h1 {
  font-size: clamp(24px, 5vw, 48px);
}

/* Дэд гарчиг */
h2 {
  font-size: clamp(20px, 3.5vw, 36px);
}

/* Биеийн текст */
p {
  font-size: clamp(14px, 1.5vw, 16px);
}

/* Padding уян */
.хэсэг {
  padding: clamp(32px, 8vw, 120px) clamp(16px, 5vw, 80px);
}

Fluid container

css

.чингэлэг {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

env() — орчны хувьсагч

Төхөөрөмжийн тусгай утгуудыг авна. Ялангуяа iPhone-ны notch-д:

css

/* iPhone notch-оос зайлах */
.navbar {
  padding-top: env(safe-area-inset-top);
}

.footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Бүрэн хуудас — notch тооцсон */
.бүрэн-хуудас {
  min-height: calc(
    100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
}

Утгуудын жагсаалт:

css

env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

Функцүүдийг хослуулах

css

/* clamp дотор calc */
.текст {
  font-size: clamp(1rem, calc(0.5rem + 2vw), 2rem);
}

/* min дотор calc */
.хайрцаг {
  width: min(calc(100% - 32px), 600px);
}

/* Variable + calc + clamp */
:root {
  --gap: 24px;
}

.grid {
  gap: var(--gap);
  padding: clamp(var(--gap), 5vw, calc(var(--gap) * 3));
}

Бодит жишээ: Бүрэн fluid хуудас

css

:root {
  --фонт-xs: clamp(11px, 1.2vw, 13px);
  --фонт-sm: clamp(13px, 1.5vw, 15px);
  --фонт-md: clamp(15px, 1.8vw, 17px);
  --фонт-lg: clamp(20px, 3vw, 28px);
  --фонт-xl: clamp(28px, 5vw, 48px);
  --зай-sm: clamp(8px, 2vw, 16px);
  --зай-md: clamp(16px, 4vw, 32px);
  --зай-lg: clamp(32px, 8vw, 80px);
}

body {
  font-size: var(--фонт-md);
}

h1 {
  font-size: var(--фонт-xl);
}
h2 {
  font-size: var(--фонт-lg);
}

.хэсэг {
  padding: var(--зай-lg) var(--зай-md);
}

.чингэлэг {
  width: min(1200px, 100% - var(--зай-md) * 2);
  margin: 0 auto;
}

Ямар функцийг хэзээ ашиглах?

| Функц | Хэрэглэх тохиолдол | | --------- | ---------------------------------------- | | calc() | Нэгж хольж тооцоолох — 100% - 48px | | min() | Хамгийн ихийн хязгаар — max-width шиг | | max() | Хамгийн багын хязгаар — min-height шиг | | clamp() | Уян утга — fluid typography, spacing | | env() | Төхөөрөмжийн safe area |

Дараагийн хичээлд:

Dark mode — prefers-color-scheme media query ба CSS variable-аар гэрэл/харанхуй горимыг хэрхэн хэрэгжүүлэхийг судална.

← Өмнөх хичээлClip-path ба mask Дараах хичээл →Dark mode