מחולל CSS clamp
הזינו רוחבי מסך ומידות למסכים קטנים וגדולים כדי ליצור CSS שמשנה בעדין את גודל הטקסט או הרווחים. צפו בפלט של px או rem, ואז העתיקו את קוד ה-CSS ואת קוד ה-Tailwind או שמרו אותם כטקסט.
מה ניתן לעשות
ציון 2 זוגות של רוחב וגודל
ציין גדלים ל-viewport צר ול-viewport רח. נתמכים 6 סוגים: גודל גופן, רווחים, padding, margin, רוחב וגובה.
יצירת קוד ב-px או ב-rem
הזן את כל הערכים ב-px, ובחר px או rem לפלט. קבל הצהרת CSS וקוד מאפיין שרירותי של Tailwind.
בדיקת ה-CSS שנוצר מיד
מחיל את ה-CSS על שני רכיבים בתצוגה המקדימה. בדוק איך הטקסט והרווח נראים ברוחב המסגרת הנוכחי.
איך להשתמש
בחירת המאפיין לשינוי
בחר את מאפיין ה-CSS שברצונך לציין, כגון font-size לגודל טקסט או gap לרווח בין רכיבים.
הזנת שני רוחבי viewport ושני גדלים
הזן את שני רוחבי ה-viewport ואת הגודל של כל אחד מהם ב-px. הגודל עבור ה-viewport הקטן חייב להיות קטן או שווה לגודל עבור הגדול.
בדיקת יחידת הפלט ויצירה
בחר px או rem בהגדרות המתקדמות. עבור rem בדוק גם את גודל הגופן הבסיס לפני לחיצה על «יצירת CSS».
תצוגה מקדימה וקבלת הקוד
העתק את ה-CSS והדבק אותו במקום שבו תשתמש בו. פתח את קוד ה-Tailwind כדי לקבל אותו. אפשר גם להעתיק את שני הפריטים יחד או לשמור אותם כטקסט.
שימושי כאשר
שינוי גדלי כותרות באופן חלק
כאשר ברצונך לקבוע גדלי טקסט ל-viewport צר ורח ולשנות אותם ברציפות בין שני הרוחבים, במקום במדרגות.
התאמת הרווח ל-viewport
כאשר ברצונך שרווחי כרטיסים או padding פנימי ישתנו בתוך גדלי המזערי והמרבי שקבעת.
ציון גדלים גמישים וקריאת התצוגה המקדימה
שלושת הערכים ב-clamp
clamp היא פונקציית CSS שמציינה ערך מזערי, ערך גמיש וערך מרבי. הנוסחה שנוצרת מחברת בין שתי נקודות ייחוס באמצעות ביטוי לינארי ומגבילה גדלים שמחוץ לטווח לגדלי הקצה.
קלט ב-px; פלט ב-px או ב-rem
גם רוחבי ה-viewport וגם הגדלים מוזנים ב-px. בפלט של rem הגדלים והאיבר הקבוע מחולקים בגודל הגופן הבסיס, ואילו מקדם ה-vw של רוחב ה-viewport נשאר ללא שינוי.
התאמת בסיס ה-rem למקום שבו משתמשים בקוד
בברירת המחדל, הקוד מתייחס ל-1rem כ-16px. אם גודל הגופן של רכיב השורש שונה במקום שבו משתמשים בקוד, גם גדלי הקצה ואופן שינוי הגודל יהיו שונים. בדוק זאת גם במקום השימוש.
מסגרת התצוגה המקדימה מגדירה את רוחב ה-viewport
התצוגה המקדימה היא מסגרת תצוגה עצמאית. היא מחשבת vw מהרוחב בתוך המסגרת ולא מרוחב המסך כולו. בהתאם למאפיין, אותו CSS שנוצר מוחל על הטקסט, על הרווח בין שני הרכיבים, על הרווחים או על מידות הרכיבים.
בדוק גם במקום שבו משתמשים בקוד
הטקסט והמבנה בתצוגה המקדימה קבועים. בדוק גם את הגופנים, את טקסט ארוך, את גלישת שורות ואת הגדלת הטקסט בדפדפן במקום שבו משתמשים בקוד. קוד ה-Tailwind משתמש בפורמט של מאפיין שרירותי; בדוק גם שהוא מזוהה ונוצר במקום שבו משתמשים בו.
שאלות נפוצות
מה קורה מחוץ לטווח רוחבי ה-viewport שצוינו?
רוחב צר מרוחב הייחוס הקטן ייקח את הגודל המזערי, ורוחב רח מרוחב הייחוס הגדול ייקח את הגודל המרבי. עבור rem חובה להשתמש באותו גודל גופן בסיס שבזמן שהקוד נוצר.
מהו גודל הגופן הבסיס עבור rem?
הוא מציין כמה px משמשים לחישוב של 1rem. ברירת המחדל היא 16px, ואפשר לשנות אותה ל-1–1000px בהגדרות המתקדמות. התאים אותה לגודל הגופן של רכיב השורש שבו תשתמש בקוד.
אפשר לציין גדלים שווים או ערכים שליליים?
הגדר את הערך המזערי ואת הערך המרבי לאותו מספר כדי לקבל גודל קבוע. ערכים שליליים מותרים רק עבור margin. גדלים שקטנים ככל שרוחב ה-viewport גדול אינם נתמכים.
האם שינויים במאפיינים או בערכים חלים מיד?
שינוי שלהם מוחק את הקוד ואת התצוגה המקדימה שנוצרו. לחץ «יצירת CSS» כדי לעדכן אותם. הדבר נכון גם כשמשנים את יחידת הפלט או את גודל הגופן הבסיס.
אפשר לשנות את טקסט התצוגה המקדימה?
טקסט הדוגמה ו-Aa 123 הם קבועים. אין תכונת עריכת טקסט. בדוק גם את הטקסט ואת רוחב התצוגה בעמוד שבו נעשה שימוש ב-CSS שנוצר.
קלט ותוצאות
- רוחב viewport
- 1–100000px. רוחב ה-viewport הקטן חייב להיות קטן מהגדול. נתקבלים גם ערכים עשרוניים.
- גודל
- 0–10000px. רק margin יכול לרדת עד −10000px. הגודל עבור ה-viewport הקטן חייב להיות קטן או שווה לגודל עבור הגדול.
- פלט
- הצהרת CSS ומאפיין שרירותי של Tailwind. שמור את שני הפריטים כ-css-clamp-generator.txt.
- דיוק
- הנוסחה שנוצרת משתמשת במקדמים עם עד 13 ספרות משמעיות. מתקבלת שגיאה עבור רוחבים כה קרובים שהנוסחה המעוגלת אינה יכולה לשחזר את נקודות הייחוס, למשל.