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% томруулахад текст томорч байгаа эсэхийг хурдан шалгаж үзэх нь зүйтэй.

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 хооронд хөрвүүлнэ үү — аль нэг талбарыг засахад нөгөө хоёр нь бичих явцад шууд шинэчлэгдэнэ.