Generator CSS clamp
Introduceți lățimile ecranelor și dimensiunile pentru ecranul mic și cel mare, pentru a genera un CSS care schimbă lin fluid dimensiunea textului sau spațierea. Previzualizați ieșirea în px sau rem, apoi copiați codul CSS și Tailwind sau salvați-l ca text.
Ce puteți face
Specificați 2 perechi de lățime și dimensiune
Specificați dimensiuni pentru un viewport mic și unul mare. Acceptă 6 tipuri: dimensiunea fontului, spațiile, paddingul, margin, lățimea și înălțimea.
Generați cod în px sau rem
Introduceți toate valorile în px și alegeți px sau rem pentru ieșire. Obțineți o declarație CSS și cod pentru proprietăți arbitrare Tailwind.
Verificați imediat CSS-ul generat
Aplică CSS-ul la două elemente din previzualizare. Verificați cum apar textul și spațierea la lățimea curentă a cadrului.
Cum se folosește
Alegeți proprietatea de modificat
Alegeți proprietatea CSS pe care doriți să o specificați, precum font-size pentru dimensiunea textului sau gap pentru spațierea dintre elemente.
Introduceți două lățimi de viewport și dimensiunile
Introduceți fiecare dintre cele două lățimi de viewport și dimensiunea sa în px. Dimensiunea pentru viewportul mai mic nu trebuie să fie mai mare decât cea pentru viewportul mai mare.
Verificați unitatea de ieșire și generați
Alegeți px sau rem în setările avansate. Pentru rem verificați și dimensiunea fontului de bază înainte de a apăsa „Generați CSS“.
Previzualizați și obțineți codul
Copiați CSS-ul și lipiți-l acolo unde îl veți folosi. Deschideți codul Tailwind pentru a-l prelua. Puteți copia împreună ambele elemente sau să le salvați ca text.
Util în cazuri precum
Schimbați fără trepte dimensiunile titlurilor
Când doriți să stabiliți dimensiuni ale textului pentru viewporturi înguste și late și să le variați continuu între aceste lățimi, nu în trepte.
Adaptați spațierea la viewport
Când doriți ca spațiile dintre carduri sau paddingul interior să varieze între dimensiunea minimă și cea maximă setate.
Specificarea dimensiunilor fluide și citirea previzualizării
Cele 3 valori din clamp
clamp este o funcție CSS care specifică o valoare minimă, o valoare fluidă și o valoare maximă. Formula generată leagă două puncte de referință printr-o expresie liniară și limitează dimensiunile din afara intervalului la dimensiunile de la capete.
Intrare în px; ieșire în px sau rem
Ambele lățimi de viewport și dimensiunile se introduc în px. Pentru ieșirea în rem, dimensiunile și termenul fix se împart la dimensiunea fontului de bază, în timp ce coeficientul vw pentru lățimea viewportului rămâne neschimbat.
Potriviți baza rem cu locul unde este folosit codul
În mod implicit, codul tratează 1rem ca 16px. Dacă dimensiunea fontului elementului rădăcină diferă acolo unde este folosit codul, și dimensiunile de la capete și modul în care se schimbă dimensiunea vor fi diferite. Verificați și în locul unde îl folosiți.
Cadrul de previzualizare determină lățimea viewportului
Previzualizarea este un cadru de afișare independent. Calculează vw din lățimea din interiorul cadrului, nu din lățimea întregului ecran. În funcție de proprietate, același CSS generat se aplică textului, spațierii dintre cele două elemente, spațierii sau dimensiunilor elementelor.
Verificați și locul unde este folosit codul
Textul și structura din previzualizare sunt fixe. Verificați și fonturile, textul lung, împărțirea pe linii și mărirea textului în browser acolo unde folosiți codul. Codul Tailwind folosește formatul de proprietate arbitrară; verificați și că este detectat și generat acolo unde îl folosiți.
Întrebări frecvente
Ce se întâmplă în afara intervalului de lățimi specificate?
Lățimile mai mici decât lățimea specificată mai mică folosesc dimensiunea minimă, iar lățimile mai mari decât lățimea specificată mai mare folosesc dimensiunea maximă. Pentru rem trebuie să folosiți aceeași dimensiune a fontului de bază ca atunci când a fost generat codul.
Care este dimensiunea fontului de bază pentru rem?
Specifică câți px sunt folosiți pentru calculul lui 1rem. Valoarea implicită este 16px și o puteți schimba în 1–1000px în setările avansate. Potriviți dimensiunea fontului elementului rădăcină în care veți folosi codul.
Pot specifica dimensiuni egale sau valori negative?
Setați minimul și maximul la aceeași valoare pentru o dimensiune constantă. Valorile negative sunt permise doar pentru margin. Dimensiunile care scad odată cu lățimea viewportului nu sunt acceptate.
Se aplică imediat modificările proprietăților sau valorilor?
Modificarea lor șterge codul generat și previzualizarea. Apăsați „Generați CSS“ pentru a le actualiza. Același lucru se aplică și când schimbați unitatea de ieșire sau dimensiunea fontului de bază.
Pot schimba textul din previzualizare?
Textul exemplu și Aa 123 sunt ambele fixe. Nu există o funcție de editare a textului. Verificați și textul real și lățimea de afișare pe pagina care folosește CSS-ul generat.
Intrare și rezultate
- Lățimea viewportului
- 1–100000px. Lățimea mai mică a viewportului trebuie să fie mai mică decât cea mai mare. Sunt acceptate și zecimale.
- Dimensiune
- 0–10000px. Doar margin poate coborî până la −10000px. Dimensiunea pentru viewportul mai mic nu trebuie să fie mai mare decât cea pentru viewportul mai mare.
- Ieșire
- O declarație CSS și o proprietate arbitrară Tailwind. Salvați ambele elemente în css-clamp-generator.txt.
- Precizie
- Formula generată folosește coeficienți cu până la 13 cifre semnificative. Pentru lățimi atât de apropiate încât formula rotunjită nu poate reproduce punctele de referință apare o eroare, de exemplu.