יחידות מדידה אפשריות ב-CSS

שימוש ביחידות מדידה שונות ב-CSS

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

במאמר זה, נחקור את יחידות המדידה הנפוצות ביותר של CSS, כולל פיקסלים (px), ems ו-rems, אחוזים (%), יחידות נקודת מבט (vw ו-vh) ועוד. נסביר כל יחידה בפירוט, נספק דוגמאות ונציע טיפים לשימוש יעיל ביחידות המדידה השונות.

פיקסלים (px)

פיקסל (px) הוא יחידת מדידה בגודל קבוע הנפוצה בשימוש בעיצוב אתרים. פיקסל אחד שווה בדרך כלל לנקודה אחת על מסך המחשב.

דוגמה:

p {
	font-size:16px;
	width:300px;
}

פיקסלים הם יחידה מוחלטת, דבר שהופך אותם לחזויים וקלים לשימוש לשליטה מדויקת באלמנטים.

נמליץ שלא להשתמש ב-px עבור גדלי גופנים, מכיוון שקביעת גדלים בפיקסלים איננה רספונסיבית ועלולה להוביל לבעיות תאימות למכשירים ולרזולוציות שונות ולבעיות נגישות.

יחידות em

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

דוגמה:

body {
	font-size:16px;
}

p {
	font-size:1.2em; /* 1.2 times the font-size of its parent (body) */
}

יחידות em שימושיות ליצירת פריסות ניתנות להרחבה וגמישות שמתאימות היטב להעדפות המשתמש.

נמליץ להמנע מקינון יתר של אלמנטים עם יחידות em, דבר שעלול להוביל לטעויות ולבעיות שונות בתאימות.

יחידות rem

יחידת rem היא יחסית לגודל הגופן הבסיסי (html) ומספקת גודל עקבי על פני כל העמוד.

דוגמה:

html {
	font-size:16px; /* Set the base font size for the page */
}

p {
	font-size:1.2rem; /* 1.2 times the base font-size of the page */
}

יחידת rem שימושית במיוחד לשמירה על פריסה עקבית בכל האתר.

נמליץ להשתמש ב-rem עבור מרווחים (padding ו-margin), כדי להבטיח עיצוב מגובש שקל לתחזק ולשנות.

אחוזים (%)

האחוזים הם יחסיים לערך של רכיב האב. לדוגמה, הגדרת רוחב: 50% פירושה שהרכיב יתפוס 50% מרוחב ההורה שלו.

דוגמה:

.container {
	width:80%; /* 80% of the parent element's width */
}

שימוש באחוזים מצוין ליצירת פריסת אלמנטים שמתאימה לגדלים ולרזולוציות מסך שונות.

נמליץ להזהר משימוש באחוזים עבור מרווחים (padding ו-margin), מכיוון שהדבר עלול לפעמים להניב תוצאות בלתי צפויות.

נקודות מבט (vw ו-vh)

יחידת נקודת מבט (viewport) היא ביחס לממדים של התצוגה הנראית לעין. רוחב נקודת מבט אחד (1vw) שווה ל-1% מרוחב התצוגה, וגובה יציאת תצוגה אחת (1vh) שווה ל-1% מגובה התצוגה.

דוגמה:

header {
	width:80vw; /* 80% of the viewport width */
	height:40vh; /* 40% of the viewport height */
}

יחידות viewport מצוינות ליצירת פריסת אלמנטים המותאמת היטב בין מכשירים ובגדלים שונים של מסך.

נמליץ להשתמש ב-vw ו-vh עבור גדלי גופנים ומרווחים (padding ו-margin), כדי להבטיח עיצוב רספונסיבי ונגיש.

יחידות ch

יחידת ch שווה לרוחב התו "0" (אפס) של הגופן של האלמנט.

דוגמה:

code {
	width:30ch; /* 30 times the width of the "0" character */
}

יחידת ch חשובה לשמירה על פריסות טקסט עקביות וקריאות, במיוחד באלמנטים הקשורים לקוד.