CSS clamp generátor
Adjon meg képernyőszélességeket és méreteket a kis és a nagy képernyőhöz, és generáljon CSS-t, amely simán váltja a szövegméretet vagy a távolságot. Tekintse meg a px vagy rem kimenetet, majd másolja a CSS és a Tailwind kódot, vagy mentse szövegként.
Mire használható
Adj meg 2 szélesség–méret párt
Adj meg méreteket egy kis és egy nagy nézetablakhoz. 6 típus támogatott: betűméret, hézagok, belső margó, külső margó, szélesség és magasság.
Kód generálása px-ben vagy rem-ben
Adj meg minden értéket px-ben, és válassz px-et vagy rem-et a kimenethez. Szerezz CSS deklarációt és Tailwind tetszőleges tulajdonság kódot.
Azonnal ellenőrizd a generált CSS-t
Az előnézetben a CSS-t két elemre alkalmazza. Nézd meg, hogyan jelennek meg a szövegek és a távolságok az aktuális keret szélességénél.
Hogyan használható
Válaszd ki a módosítandó tulajdonságot
Válaszd ki a CSS tulajdonságot, amelyet meg szeretnél adni, például a font-size értéket a szövegmérethez vagy a gap értéket az elemek közötti távolsághoz.
Adj meg két nézetablak-szélességet és méretet
Adj meg két nézetablak-szélességet és a hozzájuk tartozó px-ben megadott méretet. A kisebb nézetablakhoz megadott méret nem lehet nagyobb a nagyobbihoz megadottnál.
Ellenőrizd a kimeneti egységet, és generálj
Válassz px-et vagy rem-et a haladó beállításokban. A rem esetén a CSS generálása gomb megnyomása előtt ellenőrizd az alap betűméretet is.
Nézd meg az előnézetet, és vedd át a kódot
Másold a CSS-t, és illeszd oda, ahol használni fogod. A Tailwind kód megnyitásával éred el. Az összes 2 elemet együtt is másolhatod, vagy elmentheted szövegként.
Mikor hasznos
Címsorméret finomhangolása
Akkor, ha a szövegméretet szűk és széles nézetablakokhoz szeretnéd megadni, és a méretet e szélességek között folytonosan, nem pedig lépcsőzetesen változtatnád.
Térköz igazítása a nézetablakhoz
Akkor, ha a kártyák hézagai vagy a belső margó a megadott minimum és maximum méret között változna.
Folyékony méretek megadása és az előnézet értelmezése
A clamp 3 értéke
A clamp CSS funkció, amely minimumértéket, folyékony értéket és maximumértéket ad meg. A generált képlet lineáris kifejezéssel köti össze a két referencia pontot, a tartományon kívüli méreteket pedig a végpont méreteire korlátozza.
Bemenet px-ben; kimenet px-ben vagy rem-ben
A nézetablak-szélességeket és a méreteket is px-ben adod meg. A rem kimenetnél a méreteket és a fix tagot elosztjuk az alap betűmérettel, a nézetablak-szélességhez tartozó vw együttható viszont változatlan marad.
A rem alapját igazítsd a kód használati helyéhez
Alapértelmezés szerint a kód az 1rem értékét 16px-nek tekinti. Ha a gyökérelem betűmérete eltér ott, ahol a kódot használod, akkor a végpont méretei és a méret változása is eltér. Ezt is ellenőrizd a használat helyén.
Az előnézeti keret határozza meg a nézetablak szélességét
Az előnézet független megjelenítési keret. A vw értékét a kereten belüli szélességből számítja, nem a teljes képernyő szélességéből. Tulajdonságtól függően ugyanaz a generált CSS érvényesül a szövegre, a két elem közötti hézagra, a térközre vagy az elemek méretére.
Ellenőrizd a kód használati helyét is
Az előnézeti szöveg és a szerkezet rögzített. Ellenőrizd a betűtípusokat, a hosszú szövegeket, a sortörést és a böngésző szövegnagyítását is ott, ahol a kódot használod. A Tailwind kód tetszőleges tulajdonság formátumot használ; azt is ellenőrizd, hogy felismeri-e és generálja-e ott, ahol használod.
Gyakori kérdések
Mi történik a megadott nézetablak-szélességi tartományon kívül?
A kisebb megadott szélességnél keskenyebb értékek a minimum méretet használják, a nagyobb megadott szélességnél szélesebb értékek pedig a maximum méretet. A rem esetén ugyanazt az alap betűméretet kell használni, mint a kód generálásakor.
Mi a rem alap betűmérete?
Ez határozza meg, hány px-ből számítjuk az 1rem értékét. Az alapérték 16px, amelyet a haladó beállításokban 1–1000px közre módosíthatsz. Vedd figyelembe annak a gyökérelemnek a betűméretét, ahol a kódot használni fogod.
Megadhatok azonos méreteket vagy negatív értékeket?
Állítsd a minimumot és a maximumot azonos értékre, ha állandó méretet szeretnél. Negatív érték csak a margónál megengedett. Az a méret nem támogatott, amely a nézetablak szélességének növekedésével csökken.
A tulajdonságok vagy értékek módosítása azonnal érvényesül?
Ezek módosítása törli a generált kódot és az előnézetet. A frissítéshez nyomd meg a CSS generálása gombot. Ugyanez igaz a kimeneti egység vagy az alap betűméret módosításakor is.
Módosíthatom az előnézeti szöveget?
A minta szöveg és az Aa 123 is rögzített. Nincs szövegszerkesztő funkció. Ellenőrizd a tényleges szöveget és a megjelenítési szélességet azon az oldalon is, ahol a generált CSS-t használod.
Bemenet és eredmény
- Nézetablak szélessége
- 1–100000px. A kisebb nézetablak-szélességnek kisebbnek kell lennie a nagyobbnál. A tizedes értékeket is elfogadjuk.
- Méret
- 0–10000px. Csak a külső margó mehet le −10000px-ig. A kisebb nézetablakhoz megadott méret nem lehet nagyobb a nagyobbihoz megadottnál.
- Kimenet
- Egy CSS deklaráció és egy Tailwind tetszőleges tulajdonság. Mind a 2 elemet elmentheted css-clamp-generator.txt fájlként.
- Pontosság
- A generált képlet legfeljebb 13 értékes jegyű együtthatókat használ. Hiba keletkezik, ha a szélességek olyan közel vannak egymáshoz, hogy a kerekített képlet nem tudja visszaállítani a referencia pontokat, például.