CSS clamp() Тооны машин

Жижиг болон том дэлгэцийн хэмжээг оруулж, тэдгээрийн хооронд жигд өөрчлөгдөх уян хатан clamp() утгыг аваарай — үсгийн хэмжээ, padding, margin эсвэл gap-д зориулагдсан.

Хэмжээнүүд
Минимум
Максимум
clamp() утга
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Үр дүн нь дунд хэсэгт rem хэмжээг хадгалдаг тул хэрэглэгч 200% томруулахад текст томорсоор байх болно — зөвхөн viewport-оос хамаарсан утга үүнийг хийж чадахгүй.

Урьдчилан харах

Уян хатан текст, яг таарсан хэмжээтэй.

Утгыг тохируулахын тулд хэмжээ болон дэлгэцийн өргөнийг өөрчилнө үү.

Тооцоолол нь бүхэлдээ таны хөтөч дээр ажиллана. Таны оруулсан юуг ч BroBroGo руу хуулж илгээхгүй.

Түгээмэл асуултууд

Тооны машин clamp() утгыг хэрхэн үүсгэдэг вэ?

Та үүнд хоёр цэг өгнө: жижиг дэлгэцийн өргөн дэх хэмжээ болон том дэлгэцийн өргөн дэх хэмжээ. Энэ нь тэдгээрийн хооронд шулуун шугам татах бөгөөд дэлгэц өргөсөх тусам хэмжээ нь жигд нэмэгдэж, дараа нь үүнийг clamp() функцээр бүрхэж, таны жижиг дэлгэцийн хэмжээнээс багасахгүй, том дэлгэцийн хэмжээнээс хэтрэхгүй болгодог. Хоёр өргөний хооронд хэмжээ нь уян хатан өөрчлөгдөх бөгөөд тэдгээрээс гадуур хамгийн ойрын хязгаартаа баригдана.

Яагаад үр дүн нь пикселийн оронд rem болон vw-ээр гардаг вэ?

Хязгаарууд нь rem-ээр илэрхийлэгдэх бөгөөд өөрчлөгдөж буй дунд хэсэг нь rem бүрэлдэхүүнийг хадгалдаг тул уншигч хөтчийнхөө үндсэн үсгийн хэмжээг томруулахад текст томорсоор байх болно. Зөвхөн пиксел эсвэл viewport ашигласан утга нь үүнийг ажиллуулахгүй байж болно. Та хэмжээг пикселээр оруулдаг, учир нь ихэнх хүмүүс ингэж боддог бөгөөд хэрэгсэл нь таны үндсэн үсгийн хэмжээг ашиглан rem рүү хөрвүүлдэг.

Үүнийг зөвхөн үсгийн хэмжээнээс гадна зай авахад (spacing) ашиглаж болох уу?

Тийм ээ. Энэ утгыг padding, margin, gap, өргөн эсвэл өндөр зэрэг урт зааж өгдөг хаана ч ашиглаж болно. Текстийн оронд зай хэрхэн нэмэгдэж байгааг харахын тулд урьдчилан харах горимыг "Хайрцаг" (Box) болгож солиорой. Хэрэв таны жижиг болон том хэмжээ ижил байвал өөрчлөгдөх зүйл байхгүй тул үр дүн нь энгийн тогтмол урт руу шилжинэ.

Бүх хөтөч clamp()-ийг дэмждэг үү?

Тийм — 2020 оноос хойш бүх орчин үеийн хөтөч clamp()-ийг дэмждэг болсон тул та утгыг нэмэлт хамгаалалтгүйгээр шууд ашиглаж болно. Маш том максимум хэмжээ эсвэл хурдан өөрчлөгдөх хурдтай үед уншигчдад зориулж 200% томруулахад текст томорч байгаа эсэхийг хурдан шалгаж үзэх нь зүйтэй.

BroBroGo редакцийн баг бичиж, хянасан.Сүүлд шинэчилсэн:

CSS clamp() функцийн тухай ба уян хатан дизайны ач холбогдол

Орчин үеийн вэб дизайнд хуудасны элементүүд болон бичвэрийн хэмжээг өөр өөр дэлгэцийн өргөнд тохируулан уян хатан өөрчлөх шаардлага тулгардаг. CSS clamp() функц нь хэмжээг хамгийн бага болон хамгийн их утгын хооронд, дэлгэцийн өргөнөөс хамааруулан жигд хувиргах боломжийг олгодог хүчирхэг хэрэгсэл юм. Энэхүү функц нь заасан хязгаараас хэтрэхгүйгээр дунд хэсэгтээ уян хатан өөрчлөгдөх утгыг тодорхойлдог.

Энэхүү аргачлалыг вэб хуудасны дараах хэсгүүдэд өргөн ашигладаг:

  • Дэлгэцийн хэмжээнээс хамаарч жигд томорч жижигсэх уян хатан гарчиг болон бичвэрүүд (fluid typography).
  • Төрөл бүрийн төхөөрөмжид автоматаар зохицох зай авах хэмжээсүүд (padding, margin, gap).
  • Элементийн өргөн болон өндөр зэрэг урт зааж өгөх бусад шинж чанарууд.

Тооны машины ажиллах зарчим ба оролтын утгууд

CSS clamp() Тооны машин нь таны оруулсан пиксел (px) утгуудыг шугаман интерполяцийн (linear interpolation) тусламжтайгаар тооцоолж, уян хатан CSS clamp() функцийг үүсгэдэг. Тооцооллыг үнэн зөв хийхийн тулд дараах оролтын утгуудыг ашиглана:

  1. Минимум Хэмжээ (Size): Жижиг дэлгэцийн өргөн дээр байх хамгийн бага хэмжээ.
  2. Минимум Дэлгэцийн өргөн (Viewport): Жижиг дэлгэцийн хэмжээг заах эерэг тоо.
  3. Максимум Хэмжээ (Size): Том дэлгэцийн өргөн дээр байх хамгийн их хэмжээ.
  4. Максимум Дэлгэцийн өргөн (Viewport): Том дэлгэцийн хэмжээг заах эерэг тоо.
  5. Үндсэн үсгийн хэмжээ (Root): Пиксел утгуудыг rem нэгж рүү хөрвүүлэхэд ашиглах үндсэн хэмжээ.

Тооны машин нь таны оруулсан пиксел утгуудыг rem нэгж рүү хөрвүүлдэг. Үүсгэсэн clamp() функцийн хязгаарууд нь rem нэгжээр илэрхийлэгдэх бөгөөд өөрчлөгдөж буй дунд хэсэг нь мөн rem бүрэлдэхүүнийг хадгалдаг. Энэ нь хэрэглэгч хөтчийнхөө үндсэн үсгийн хэмжээг томруулах эсвэл хуудсыг томруулж харах үед текст дагаж томрох боломжийг бүрдүүлдэг тул хүртээмжтэй байдлыг (accessibility) бүрэн хангадаг.

Дүрмүүд ба алдааны мэдэгдлүүд

Тооцоолуурыг зөв ажиллуулахын тулд дараах дүрмүүдийг баримтална:

  • Оролтын талбар бүрт хүчинтэй тоо оруулсан байх шаардлагатай. Хэрэв буруу утга оруулбал "Талбар бүрт хүчинтэй тоо оруулна уу." гэсэн алдаа гарна.
  • Жижиг дэлгэцийн өргөн нь том дэлгэцийн өргөнөөс заавал бага, эерэг тоо байх ёстой. Хэрэв энэ нөхцөл биелэхгүй бол үр дүн нь — болох бөгөөд "Жижиг дэлгэцийн өргөн нь том дэлгэцийн өргөнөөс бага эерэг тоо байх ёстой." гэсэн алдааны мэдэгдэл гарна.
  • Хэрэв таны оруулсан жижиг болон том хэмжээ ижил байвал уян хатан өөрчлөлт гарахгүй бөгөөд үр дүн нь энгийн тогтмол урт руу шилжинэ. Энэ үед "Хоёр хэмжээ ижил байгаа тул энэ нь уян хатан биш, тогтмол утга юм." гэсэн төлөв харагдана.
  • Хэрэв дэлгэц томрох тусам хэмжээ нь жижигсэх утга оруулбал "Урвуу өөрчлөлт — дэлгэц томрох тусам хэмжээ нь жижигснэ." гэсэн төлөв илэрхийлэгдэнэ.

Үр дүнг урьдчилан харах ба төлөвүүд

Тооцоолсон үр дүнг шууд шалгахын тулд урьдчилан харах хэсгийг ашиглаж болно. Урьдчилан харах өргөнийг өөрчлөхөд хэмжээ хэрхэн өөрчлөгдөж байгааг дараах төлөвүүдээр харуулдаг:

  • минимум дээр баригдсан: Дэлгэцийн өргөн жижиг хязгаараас багасах үед хэмжээ хамгийн бага утга дээрээ тогтоно.
  • максимум дээр баригдсан: Дэлгэцийн өргөн том хязгаараас давах үед хэмжээ хамгийн их утга дээрээ тогтоно.
  • уян хатан өөрчлөгдөж байна: Дэлгэцийн өргөн заасан хязгааруудын хооронд байх үед хэмжээ жигд шилжин өөрчлөгдөнө.

Урьдчилан харах горимыг "Текст" (Text) эсвэл "Хайрцаг" (Box) болгон өөрчилж болно. Текст горимд "Уян хатан текст, яг таарсан хэмжээтэй." гэсэн бичвэрээр хэмжээг шалгах боломжтой.

Нууцлал ба мэдээлэл боловсруулалт

Тооцоолол нь бүхэлдээ таны хөтөч дээр ажиллана. Таны оруулсан юуг ч BroBroGo руу хуулж илгээхгүй.

Түгээмэл асуултууд

Тооны машин clamp() утгыг хэрхэн үүсгэдэг вэ?
Та үүнд хоёр цэг өгнө: жижиг дэлгэцийн өргөн дэх хэмжээ болон том дэлгэцийн өргөн дэх хэмжээ. Энэ нь тэдгээрийн хооронд шулуун шугам татах бөгөөд дэлгэц өргөсөх тусам хэмжээ нь жигд нэмэгдэж, дараа нь үүнийг clamp() функцээр бүрхэж, таны жижиг дэлгэцийн хэмжээнээс багасахгүй, том дэлгэцийн хэмжээнээс хэтрэхгүй болгодог. Хоёр өргөний хооронд хэмжээ нь уян хатан өөрчлөгдөх бөгөөд тэдгээрээс гадуур хамгийн ойрын хязгаартаа баригдана.

Яагаад үр дүн нь пикселийн оронд rem болон vw-ээр гардаг вэ?
Хязгаарууд нь rem-ээр илэрхийлэгдэх бөгөөд өөрчлөгдөж буй дунд хэсэг нь rem бүрэлдэхүүнийг хадгалдаг тул уншигч хөтчийнхөө үндсэн үсгийн хэмжээг томруулахад текст томорсоор байх болно. Зөвхөн пиксел эсвэл viewport ашигласан утга нь үүнийг ажиллуулахгүй байж болно. Та хэмжээг пикселээр оруулдаг, учир нь ихэнх хүмүүс ингэж боддог бөгөөд хэрэгсэл нь таны үндсэн үсгийн хэмжээг ашиглан rem рүү хөрвүүлдэг.

Үүнийг зөвхөн үсгийн хэмжээнээс гадна зай авахад (spacing) ашиглаж болох уу?
Тийм ээ. Энэ утгыг padding, margin, gap, өргөн эсвэл өндөр зэрэг урт зааж өгдөг хаана ч ашиглаж болно. Текстийн оронд зай хэрхэн нэмэгдэж байгааг харахын тулд урьдчилан харах горимыг "Хайрцаг" (Box) болгож солиорой. Хэрэв таны жижиг болон том хэмжээ ижил байвал өөрчлөгдөх зүйл байхгүй тул үр дүн нь энгийн тогтмол урт руу шилжинэ.

Бүх хөтөч clamp()-ийг дэмждэг үү?
Тийм — 2020 оноос хойш бүх орчин үеийн хөтөч clamp()-ийг дэмждэг болсон тул та утгыг нэмэлт хамгаалалтгүйгээр шууд ашиглаж болно. Маш том максимум хэмжээ эсвэл хурдан өөрчлөгдөх хурдтай үед уншигчдад зориулж 200% томруулахад текст томорч байгаа эсэхийг хурдан шалгаж үзэх нь зүйтэй.

CSS Cubic Bezier ҮүсгэгчХурдны муруйг үүсгэхийн тулд хоёр бариулыг чирж, цэг хэрхэн хөдөлж байгааг тогтмол хөдөлгөөнтэй харьцуулан харж, cubic-bezier() утгыг хуулж аваарай.Хайрцагны сүүдэр үүсгэгч (Box Shadow Generator)Гулсууруудыг чирж хайрцагны сүүдэр үүсгэн, гүн харагдуулахын тулд давхаргууд нэмж, бэлэн болсон CSS-ийг шууд хуулж аваарай.Градиент үүсгэгчШугаман, радиал эсвэл конус градиент үүсгэж, өнгөний цэгүүд нэмж, чиглэлийг тохируулан, CSS-ийг ганц товшилтоор хуулж аваарай.Хүрээний радиус үүсгэгчӨнцөг бүрийг гулсуураар дугуйлж, эллипс горимоор органик дусал хэлбэр үүсгэн, CSS-ийг шууд хуулж аваарай.Flexbox ҮүсгэгчFlex контейнер болон түүний элементүүдийг харагдах удирдлагаар тохируулж, бүтцийн өөрчлөлтийг шууд харан, CSS-ийг ганц товшилтоор хуулж аваарай.CSS Grid ҮүсгэгчБагана болон мөрнүүдээ тохируулж, нүднүүд дээгүүр чирж элементүүдээ байршуулан, сүлжээний CSS болон тохирох HTML-ийг ганц товшилтоор хуулж аваарай.CSS Хэлбэржүүлэгч ба ШахагчЭмх замбараагүй CSS-ийг уншихад хялбар болгож догол мөр оруулах, эсвэл дүрмийн дарааллыг хэзээ ч өөрчилдөггүй аюулгүй горимоор шахаж хэмжээг нь багасгана уу.px-ээс rem & em хөрвүүлэгчӨөрийн үндсэн болон контекст үсгийн хэмжээг ашиглан px, rem болон em хооронд хөрвүүлнэ үү — аль нэг талбарыг засахад нөгөө хоёр нь бичих явцад шууд шинэчлэгдэнэ.