עיינו בכל יחידת CSS — מוחלטת (px, cm, pt), יחסית לגופן (em, rem, ch), חלונית תצוגה (vw, dvh), שאילתת מכל, רשת (fr), זווית, זמן ורזולוציה — במדריך הניתן לחיפוש וסינון לפי סוג, עם תיאור, הערת "מתי להשתמש" וטוקנים מוכנים להעתקה. בדפדפן שלכם, בחינם.

כל יחידת CSS, מוסברת. הכול פועל בדפדפן שלכם ממדריך מובנה — שום דבר אינו נשלח לשרת.

אין יחידה התואמת לחיפוש שלכם.
נסו יחידה או קטגוריה אחרת — למשל rem, dvh, fr או זווית.

אודות מדריך יחידות CSS

מדריך יחידות ה-CSS מתעד כל יחידה שהשפה מציעה — 45 בסך הכל — מאורגנות לפי סוג: יחידות מוחלטות כמו px, cm ו-pt; יחידות יחסיות לגופן כמו em, rem, ch ו-lh; יחידות אזור תצוגה מ-vw ו-vh ועד היחידות החדשות יותר svh, lvh ו-dvh; יחידות שאילתת מכולה כמו cqw ו-cqi; יחידת ה-grid בשם fr; בתוספת זווית, זמן, רזולוציה ואחוזים.

כל כרטיס נותן יותר מהגדרה: אסימון היחידה בגופן מרווח קבוע הניתן להעתקה, שמה המלא, קטגוריה שלה, תיאור בשפה פשוטה של איך היא מחושבת, והערת "מתי להשתמש" מעשית האומרת היכן היחידה מרוויחה את מקומה — והיכן יחידה אחרת משרתת טוב יותר.

החיפוש תואם אסימונים, שמות ומשמעויות, כך ש-rem, viewport width ו-root כולם מוצאים את היחידות שלהם, ותגי סוג מסננים את הרשת לקבוצה אחת. הכל רץ בדפדפן שלכם ממדריך מובנה, ללא שליחת דבר לשרת.

כיצד להשתמש ב-מדריך יחידות CSS

  1. חפשו יחידה לפי אסימון, שם או משמעות — לדוגמה rem, viewport width או זווית.
  2. השתמשו בתגי הסוג כדי לסנן את הרשת ליחידות מוחלטות, יחסיות לגופן, אזור תצוגה, מכולה, grid, זווית, זמן, רזולוציה או אחוזים.
  3. קראו את התיאור של כל יחידה ואת הערת "מתי להשתמש" שלה כדי לבחור את הנכונה.
  4. לחצו על כפתור ההעתקה כדי לקבל את אסימון היחידה עבור גיליון הסגנונות שלכם.

שאלות נפוצות

השתמשו ב-rem לגדלי גופן ולכל דבר שצריך להתאים לגודל הטקסט המועדף על המשתמש — rem עוקב אחר גודל גופן השורש, כך שהגדרות נגישות דפדפן עובדות. השתמשו ב-px לדברים שצריכים להישאר קבועים אופטית, כמו גבולות דקים.

em יחסי לגודל הגופן של האלמנט הנוכחי עצמו, כך שאלמנטים מקוננים מצטברים את הערך; rem תמיד יחסי לאלמנט השורש, ונותן תוצאות צפויות. לכן rem הפכה לבחירת ברירת המחדל עבור סקאלות ריווח וגודל.

דפדפני נייד מציגים ומסתירים את סרגלי הכלים שלהם, משנים את הגובה הנראה, בעוד ש-vh נשאר קבוע לגודל הפריסה הגדול יותר. היחידה הדינמית dvh עוקבת אחר הגובה הנראה בפועל כשסרגלי הכלים זזים, ו-svh/lvh מקובעות למצבים הקטן והגדול ביותר.

fr מחלקת את שטח הפנוי של מכולת ה-grid לפי שבר: grid-template-columns: 2fr 1fr נותן לעמודה הראשונה פי שניים מהרוחב הנותר של השנייה, לאחר הפחתת מסלולים קבועים ומרווחים. היא קיימת רק בתוך הגדרות מסלול grid.

הן קובעות גודל אלמנטים ביחס למכולת השאילתה הקרובה ביותר ולא לאזור התצוגה: cqw הוא 1% מרוחב המכולה, cqi הוא 1% מגודלה הפנימי. הן מאפשרות לרכיב להתאים לתיבה שבה הוא חי, ללא קשר לגודל המסך.

כן. כל 45 היחידות מתועדות חינם בעמוד הרץ כולו בדפדפן שלכם — ללא הרשמה, ללא בקשות לשרת.

שתף זאת
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.