יחידות CSSExplained

38 of 38 rows

יחידה↕	ביחס אל↕	מתי להשתמש↕	דוגמה↕
מוחלטות
⤢px	1/96 אינץ' (פיקסל הייחוס של CSS).	מידות קבועות לממשק: מסגרות, קווים דקיקים, ממדי אייקונים.	border: 1px solid #000;
⤢pt	1/72 אינץ' (1pt = 1.333px).	גיליונות סגנון להדפסה, שבהם המידות ממופות לנייר פיזי.	font-size: 12pt;
⤢cm	סנטימטר אחד (≈37.8px).	פריסות הדפסה שדורשות מידות מהעולם האמיתי.	margin: 2cm;
⤢mm	מילימטר אחד (≈3.78px).	מדידות הדפסה עדינות.	padding: 5mm;
⤢in	אינץ' אחד (96px = 2.54cm).	פריסות הדפסה במידות אינץ'.	margin: 1in;
יחסיות לגופן
⤢em	גודל הגופן של הרכיב עצמו (יורש מההורה שלו).	ריווח שגדל יחד עם הטקסט שמסביב.	padding: 1em;
⤢rem	גודל הגופן של רכיב השורש (רכיב ה-html).	גדלי גופן: מכבד את ההגדרה של גודל הגופן הבסיסי אצל המשתמש.	font-size: 1.25rem;
⤢ch	רוחב ההתקדמות של הגליף '0' בגופן הנוכחי.	קביעת אורך שורה קריא (תווים בשורה).	max-width: 70ch;
⤢ex	גובה ה-x של הגופן הנוכחי (גובה האות 'x' הקטנה).	מדדים אנכיים התלויים בגופן.	line-height: 2ex;
⤢cap	גובה האותיות הרישיות בגופן הנוכחי (גובה של אות גדולה).	מדדים אנכיים לפי אותיות רישיות, צפופים יותר מ-ex.	padding-top: 0.5cap;
⤢ic	רוחב ההתקדמות של האידאוגרף '水' (מים) בגופן הנוכחי.	מידות שעוקבות אחר תא תו אחד של CJK.	width: 4ic;
⤢lh	גובה השורה המחושב של הרכיב עצמו.	מדידת רכיבים בשורות טקסט שלמות.	height: 3lh;
⤢rlh	גובה השורה של רכיב השורש.	ריווח בכפולות של גובה השורה הבסיסי של המסמך.	margin-block: 2rlh;
יחסיות ל-viewport
⤢%	הערך של אותה תכונה אצל ההורה.	פריסות זורמות במידות של רכיב ההכלה.	width: 50%;
⤢vw	1% מרוחב ה-viewport.	מקטעים על רוחב מלא בגודל רוחב המסך.	width: 100vw;
⤢vh	1% מגובה ה-viewport.	מקטעי hero או שכבות כיסוי לכל גובה המסך.	height: 100vh;
⤢vmin	1% מהממד הקטן של ה-viewport.	מדידת רכיבים שיתאימו למסך בכל כיוון.	font-size: 5vmin;
⤢vmax	1% מהממד הגדול של ה-viewport.	מילוי הציר הדומיננטי של ה-viewport.	font-size: 5vmax;
⤢svh	1% מגובה ה-viewport הקטן (ממשק הדפדפן גלוי לגמרי).	מקטעים בגובה מלא בנייד שיתאימו מעל ממשק דפדפן מורחב.	height: 100svh;
⤢lvh	1% מגובה ה-viewport הגדול (ממשק הדפדפן מוסתר).	רקעים שחייבים לכסות את המסך גם כשסרגל הדפדפן מתכווץ.	height: 100lvh;
⤢dvh	1% מגובה ה-viewport הדינמי, עוקב אחר ממשק הדפדפן כשהוא מופיע ונעלם.	התיקון הנייד ל-100vh: הגובה משתנה כשסרגל הדפדפן מופיע.	height: 100dvh;
⤢svw	1% מרוחב ה-viewport הקטן.	מקביל הרוחב של svh למצב הצר ביותר של ה-viewport.	width: 100svw;
⤢lvw	1% מרוחב ה-viewport הגדול.	מקביל הרוחב של lvh למצב הרחב ביותר של ה-viewport.	width: 100lvw;
⤢dvw	1% מרוחב ה-viewport הדינמי, עוקב אחר ממשק הדפדפן.	מקביל הרוחב של dvh כשה-viewport משנה גודל עם סרגל הדפדפן.	width: 100dvw;
⤢vi	1% מגודל ה-viewport לאורך הציר הפנימי (רוחב במצבי כתיבה אופקיים).	מידות viewport שעוקבות אחר כיוון הכתיבה.	width: 50vi;
⤢vb	1% מגודל ה-viewport לאורך ציר הבלוק (גובה במצבי כתיבה אופקיים).	מידות viewport שנשארות נכונות במצבי כתיבה אנכיים.	height: 50vb;
זורמות
⤢clamp()	ערך מועדף התחום בין מינימום למקסימום.	טיפוגרפיה זורמת שאינה חורגת לעולם מגבול מינימום או מקסימום.	width: clamp(320px, 80vw, 1100px);
⤢min()	הקטן מבין הארגומנטים המופרדים בפסיקים.	הגבלת גודל כך שלא יחרוג לעולם ממקסימום.	width: min(100%, 600px);
⤢max()	הגדול מבין הארגומנטים המופרדים בפסיקים.	אכיפת גודל מינימלי שגדל עם ה-viewport.	width: max(50%, 300px);
זווית
⤢deg	1/360 של מעגל מלא.	טרנספורמציות סיבוב ומיקומי זווית בגרדיאנטים.	transform: rotate(45deg);
⤢rad	רדיאנים; 1rad ≈ 57.2958deg.	זוויות המחושבות מתמטית, כמו טרנספורמציות שנוצרות בקוד.	transform: rotate(1.5708rad);
⤢grad	גרדיאנים; 400grad = מעגל מלא.	ערכי זווית מיושנים או בסגנון מדידות קרקע.	transform: rotate(100grad);
⤢turn	1turn = מעגל מלא אחד של 360°.	סיבובים מלאים או חצאי סיבוב שקריאים במבט אחד.	transform: rotate(0.5turn);
זמן
⤢s	שנייה אחת.	משכי אנימציה וטרנזישן.	transition: opacity 0.3s;
⤢ms	מילישנייה אחת (1s = 1000ms).	אנימציות והשהיות קצרות למשוב בממשק.	animation-duration: 150ms;
רזולוציה
⤢dpi	נקודות לאינץ' של הפלט.	מדיה-קווריז רזולוציה להדפסה.	@media (min-resolution: 300dpi)
⤢dppx / x	נקודות לכל יחידת px; 1dppx שווה ערך לתצוגה סטנדרטית של 96dpi.	מדיה-קווריז ל-Retina ולצפיפות פיקסלים גבוהה.	@media (min-resolution: 2x)
⤢dpcm	נקודות לסנטימטר (1dppx ≈ 2.54dpcm).	מדיה-קווריז רזולוציה ביחידות מטריות.	@media (min-resolution: 118dpcm)