Үндсэн агуулга руу очих
LibraTool logoLibraTool

CSS clamp() үүсгэгч — үнэгүй

Хариу өгч буй типограф болон зайд зориулсан шингэн CSS clamp() утгыг үүсгэх. Хамгийн бага/их хэмжээ болон харах цонхны мужийг тохируулж, шууд урьдчилан харалтыг харан нэг мөр CSS хуулах.

Ачаалагдсаны дараа офлайн ажилладаг
Гаралтын нэгж:
CSS утга
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind ангилал
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px өргөн → 21.9px
Aa 22px

Өөр viewport-уудад харуулах хэмжээ

375px өргөнAa 16px
908px өргөнAa 24px
1440px өргөнAa 32px

clamp(min, preferred, max) нь утгыг viewport-тай хамт шингэнээр масштаблан, дараа нь min болон max-д түгждэг. Нэг мөрөөр типографи, зай, өргөнд зориулсан медиа хүсэлтийн давхаргыг орлодог.

Түгээмэл хэрэглээ

  • Шингэн сайхан цэгүүдтэй түүхэгдэлгүүдийг үүсгэУтаа нэг мөрнөөр гар болон компьютер дээр шрифт хэмжээ масштаба.
  • Шингэн ирмэг болон бүтэцүүдХэсэг зай үзүүлэлцэл дээр үс өс эргүүлэлт дээр үс эргүүлэл байх.
  • Мэдээллийн нойтон clamp() солихИхэнх цэг сайлалтайн үйлдэлд нэгж шингэн утга буулгах.
  • Шингэн төрлийн масштаб байгааДизайн төрл масштабны төлөө хүлээх clamp() алхам байгаа.
  • Шингэн баатар болон үзүүлэлцэл нэрстүүдТом посадачные-хуудас нэрстүүд сайн байгаа гадаа байхыг зохион байгуулаа.

Хэрхэн ажилладаг

Энэ хэрэгсэл гараар бичсэн шугаман интерполяцийн томьёо ашиглан CSS clamp() утгыг тооцоолдог — номын сан, серверийн дамжуулалт хамааралгүй. Та хоёр хэмжээ, хоёр viewport өргөн оруулна; математик таны хөтчид шууд ажиллаж таны текст эсвэл зайг эдгээр хязгаарын хооронд жигд масштаблах vw-суурьтай илүүд үздэг утгатай наах бэлэн clamp() илэрхийлэл гаргадаг.

  1. 1
    Шугаман налууны тооцоолол
    Хэрэгсэл пиксел-тутмын-пиксел налууг тооцоолдог: (maxSize - minSize) / (maxViewport - minViewport). Энэ налуу дараа нь 100-аар үржүүлэгдэж vw нэгж рүү хөрвүүлэгддэг, энэ бол CSS viewport-харьцангуй масштаблалт хэрхэн ажилладагийн үндэс.
  2. 2
    Огтлолцлын тооцоолол
    Огтлолцлын шилжилт (px эсвэл rem) шугаман функц хамгийн бага viewport дээр яг таны хамгийн бага хэмжээнд тохирохоор тооцоологддог. Хамтдаа налуу, огтлолцол clamp() дотор илүүд үздэг утгыг — бодитоор масштаблах хэсгийг — бүрдүүлдэг.
  3. 3
    Нэгжийн хөрвүүлэлт, гаралтын форматлалт
    Хэрэв та rem гаралтыг сонговол пиксел утга бүр clamp() мөрөнд бичигдэхийн өмнө таны тохируулсан root фонтын хэмжээнд (үндсэн 16px) хуваагддаг. Tailwind-ийн синтаксын дүрмээр зай доогуур зурас болж орлуулагдсан тохирох Tailwind дурын-утгын класс мөн гаргагддаг.
  4. 4
    Амьд viewport гулсуурын урьдчилан харах
    Range гулсуур танд 320px-ээс 1920px өргөн хүртэл гүйх боломж олгодог. Байрлал бүрд ижил налуу-огтлолцлын томьёо clamp хэмжээг бодит цагт тооцоолж тухайн тооцоологдсон пиксел хэмжээнд жишээ текст зурдаг тул та юу ч хуулахаасаа өмнө масштаблах зан төлөвийг харна.

Холбоотой хэрэгслүүд

🟦

CSS торны үүсгэгч

CSS торыг нүдээр загварчил — мөр, баганын нэгж болон зай — мөн үүссэн CSS ба HTML-ийг хуул.

Туршиж үзэх
📐

Миний дэлгэцийн нягтрал хэд вэ

Дэлгэцийн нягтралаа CSS болон бодит пикселээр харж, цонхны хэмжээ, пикселийн харьцаа, өнгөний гүн, HDR, хүрэлтийн дэмжлэг, шинэчлэгдэх хурдыг мэдэж, бүгдийг нь хуулж аваарай.

Туршиж үзэх
Тренд
✍️

Гарын Үсэг Үүсгэгч

Хулгана, хуруу эсвэл стилусаараа гарын үсэг зур, эсвэл нэрээ гар бичмэл фонтоор бичээд тунгалаг PNG эсвэл SVG болгон экспортол.

Туршиж үзэх

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