המיר בין פיקסלים (PX), רוט EM (REM) ו-EM (EM) עם המחשבון הפשוט הזה. חיוני עבור עיצוב ופיתוח אתרים רספונסיביים.
המיר בין פיקסלים (PX), רוט EM (REM) ו-EM (EM). הכנס ערך בכל שדה כדי לראות את הערכים המקבילים בשאר היחידות.
הבנה והמרה בין יחידות CSS היא חיונית לעיצוב ופיתוח אתרים רספונסיביים. יחידות PX (פיקסל), REM (שורש EM) ו-EM הן אבני בניין בסיסיות שקובעות כיצד אלמנטים נמדדים וממוקמים על פני מכשירים שונים וגדלי מסך. כלי המרה המלא שלנו מאפשר לך לתרגם בקלות ערכים בין שלוש יחידות CSS קריטיות אלו, ועוזר לך ליצור פריסות אתרים גמישות וקלות לתחזוקה.
פיקסלים (PX) הם יחידות בגודל קבוע שמספקות שליטה מדויקת אך חסרות סקלאביליות, בעוד שיחידות REM מתאימות יחסית לגודל הפונט של האלמנט השורש, ויחידות EM מתאימות יחסית לגודל הפונט של האלמנט ההורה שלהן. המרה בין יחידות אלו יכולה להיות מאתגרת, במיוחד בעת עבודה עם עיצובים מורכבים או כאשר תומכים בתכונות נגישות כמו שינוי גודל טקסט. ממיר ה-PX, REM ו-EM שלנו מפשט את התהליך הזה, ומאפשר לך להתמקד ביצירת עיצובים יפים ורספונסיביים.
פיקסלים (PX) הם יחידת CSS הבסיסית והנפוצה ביותר. פיקסל הוא נקודה אחת ברשת דימויים דיגיטלית ומייצג את האלמנט הקטן ביותר שניתן לשלוט בו על מסך. ב-CSS, פיקסלים מספקים יחידת מידה בגודל קבוע שנשארת עקבית ללא קשר לגורמי עיצוב אחרים.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6מאפיינים מרכזיים של פיקסלים:
יחידות REM (שורש EM) הן יחידות יחסיות שמתאימות בהתאם לגודל הפונט של האלמנט השורש (בדרך כלל אלמנט <html>). כברירת מחדל, רוב הדפדפנים קובעים את גודל הפונט של השורש ל-16px, מה שהופך 1rem לשווה ל-16px אלא אם שונה במפורש.
1html {
2 font-size: 16px; /* ברירת מחדל ברוב הדפדפנים */
3}
4
5.element {
6 width: 12.5rem; /* שווה ל-200px עם גודל פונט שורש ברירת מחדל */
7 font-size: 1rem; /* שווה ל-16px */
8 margin: 0.625rem; /* שווה ל-10px */
9}
10מאפיינים מרכזיים של יחידות REM:
יחידות EM הן יחידות יחסיות שמתאימות בהתאם לגודל הפונט של האלמנט ההורה שלהן. אם לא צוין גודל פונט להורה, EMs יפנו לגודל הפונט המורש.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* שווה ל-16px (20px × 0.8) */
7 margin: 0.5em; /* שווה ל-8px (16px × 0.5) */
8}
9מאפיינים מרכזיים של יחידות EM:
הבנת הקשרים המתמטיים בין יחידות PX, REM ו-EM היא קריטית להמרות מדויקות. הנה הנוסחאות בהן משתמש הממיר שלנו:
כדי להמיר פיקסלים ליחידות REM, חלק את ערך הפיקסל בגודל הפונט של השורש:
לדוגמה, עם גודל פונט שורש ברירת מחדל של 16px:
כדי להמיר פיקסלים ליחידות EM, חלק את ערך הפיקסל בגודל הפונט של האלמנט ההורה:
לדוגמה, עם גודל פונט של 16px להורה:
כדי להמיר יחידות REM לפיקסלים, הכפל את ערך ה-REM בגודל הפונט של השורש:
לדוגמה, עם גודל פונט שורש ברירת מחדל של 16px:
כדי להמיר יחידות EM לפיקסלים, הכפל את ערך ה-EM בגודל הפונט של האלמנט ההורה:
לדוגמה, עם גודל פונט של 16px להורה:
כדי להמיר יחידות REM ליחידות EM, יש לקחת בחשבון גם את גודל הפונט של השורש וגם את גודל הפונט של האלמנט ההורה:
אם גודל הפונט של השורש וההורה זהים (למשל, 16px), אז 1rem = 1em.
כדי להמיר יחידות EM ליחידות REM, השתמש בנוסחה הבאה:
שוב, אם שני גודלי הפונט שווים, אז 1em = 1rem.
כלי הממיר שלנו מקל על תרגום ערכים בין יחידות PX, REM ו-EM. הנה מדריך שלב אחר שלב לשימוש בממיר בצורה יעילה:
<html> של הפרויקט שלךהבנה מתי להשתמש בכל יחידת CSS וכיצד להמיר ביניהן היא קריטית לפיתוח אתרים אפקטיבי. הנה כמה יישומים מעשיים ותסריטים שבהם ממיר היחידות שלנו proves invaluable:
המרה בין יחידות היא חיונית ליצירת עיצובים רספונסיביים באמת:
1/* המרת ערכי פיקסל קבועים ליחידות REM רספונסיביות */
2.container {
3 /* מ: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* מ: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9שימוש ביחידות יחסיות משפר את הנגישות על ידי כיבוד העדפות המשתמש:
מערכות העיצוב המודרניות נהנות משימוש מחושב ביחידות:
יצירת טיפוגרפיה הרמונית דורשת בחירת יחידות זהירה:
1/* מערכת טיפוגרפיה באמצעות יחידות REM */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8כאשר מיישמים עיצובים מכלים כמו פיגמה או פוטושופ:
בעוד ש-PX, REM ו-EM הן היחידות הנפוצות ביותר, ישנן חלופות ששווה לשקול:
ההיסטוריה של יחידות CSS משקפת את האבולוציה הרחבה יותר של עיצוב אתרים, מעיצובים סטטיים לגישות רספונסיביות ונגישות של היום.
בימים הראשונים של CSS, פיקסלים שלטו. מעצבי אתרים יצרו פריסות ברוחב קבוע, בדרך כלל 640px או 800px כדי להתאים לרזולוציות מסך נפוצות. נגישות וגיוון מכשירים לא היו דאגות מרכזיות, ושליטה מדויקת הייתה המטרה העיקרית.
עם התפתחות גדלי המסך, פריסות מבוססות אחוזים הפכו לפופולריות. מעצבים החלו ליצור עיצובים גמישים יותר, אם כי טיפוגרפיה לרוב נותרה ביחידות פיקסל. תקופה זו ראתה את הצגת יחידות EM ב-CSS, אם כי האימוץ שלהן היה מוגבל בשל המורכבות של ניהול גדלי פונט קסקדיים.
ההיכרות עם האייפון בשנת 2007 שינתה את עיצוב האתרים. פתאום, אתרים נדרשו לעבוד על מסכים קטנים כמו 320px רוחב. זה עורר עניין בטכניקות עיצוב רספונסיביות ויחידות יחסיות. המגבלות של יחידות EM (בעיקר האפקט הקסקדי) הפכו ליותר ברורות כאשר העיצובים הפכו למורכבים יותר.
מאמרו המפורסם של איתן מארקוט על עיצוב אתרים רספונסיביים בשנת 2010 שינה את הדרך שבה מפתחים מתקרבים ליחידות CSS. יחידת REM הוצגה ב-CSS3, והציעה את היתרונות של סקלאביליות יחסית מבלי להיתקל במורכבויות של יחידות EM. התמיכה בדפדפנים ביחידות REM גדלה בהדרגה במהלך תקופה זו.
הפיתוח המודרני של אתרים מאמץ שילוב של יחידות למטרות שונות:
אבולוציה זו משקפת את המעבר של האינטרנט ממדיום מבוסס מסמכים לפלטפורמת יישומים מורכבת שצריכה לעבוד על פני אינספור מכשירים והקשרים.
1// המרה בין יחידות PX, REM ו-EM
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// דוגמת שימוש
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
311:root {
2 /* גדלי פונט בסיסיים */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* ערכי פיקסל נפוצים שהומרו ל-REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* סקאלת טיפוגרפיה */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* דוגמת שימוש */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
341// פונקציות SCSS להמרת יחידות
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// דוגמת שימוש
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // שימוש בגודל פונט ההורה (18px) עבור המרת EM
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, root_font_size=16):
2 """המרת פיקסלים ליחידות REM"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """המרת יחידות REM לפיקסלים"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """המרת פיקסלים ליחידות EM"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """המרת יחידות EM לפיקסלים"""
15 return em * parent_font_size
16
17# דוגמת שימוש
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21יחידות REM (שורש EM) הן יחסיות לגודל הפונט של האלמנט השורש (בדרך כלל אלמנט <html>), בעוד שיחידות EM הן יחסיות לגודל הפונט של האלמנט ההורה שלהן. ההבדל המרכזי הזה אומר שיחידות REM שומרות על גודל עקבי ברחבי המסמך ללא קשר לקינון, בעוד שיחידות EM יכולות ליצור אפקט קסקדי כאשר אלמנטים מקוננים.
אין יחידה אחת "הכי טובה" לכל המצבים. בדרך כלל, השילוב של יחידות הוא היעיל ביותר:
הגישה האידיאלית היא להשתמש בכל יחידה עבור מה שהיא עושה הכי טוב בתוך מערכת מגובשת.
ברירת המחדל של 16px נקבעה כסטנדרט קריאות שעובד היטב על פני מכשירים. מחקרים הראו כי טקסט בגובה של כ-16px הוא אופטימלי לקריאה על מסכים במרחקי צפייה טיפוסיים. ברירת מחדל זו גם מספקת בסיס טוב עבור נגישות, ומוודאת שהטקסט אינו קטן מדי עבור רוב המשתמשים.
כן, CSS תומך בערכים שליליים עבור רבות מהתכונות באמצעות כל סוגי היחידות. הממיר שלנו מטפל בערכים שליליים בצורה נכונה עבור כל סוגי היחידות.
יחידות EM מתאימות כאשר אלמנטים מקוננים. לדוגמה:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10אפקט הקסקד הזה יכול להיות שימושי ליצירת עיצובים פרופורציונליים אך דורש ניהול זהיר כדי להימנע מסקלאינג לא רצוי.
תצוגות HDPI מטופלות אוטומטית כאשר משתמשים ביחידות יחסיות כמו REM ו-EM. מכיוון שיחידות אלו מבוססות על גודל הפונט ולא על פיקסלים פיזיים, הן מתאימות בהתאם על מסכים ברזולוציה גבוהה. עבור תמונות וגבולות, שקול להשתמש בשאילתות מדיה עם יחס פיקסלים של מכשירים או רזולוציה.
התמיכה ביחידות REM ו-EM בשאילתות מדיה השתפרה משמעותית. בדרך כלל מומלץ להשתמש ביחידות EM בשאילתות מדיה מכיוון:
1/* שימוש ביחידות EM עבור שאילתות מדיה */
2@media (min-width: 48em) { /* 768px עם בסיס 16px */
3 /* סגנונות טאבלט */
4}
5
6@media (min-width: 64em) { /* 1024px עם בסיס 16px */
7 /* סגנונות שולחן עבודה */
8}
9רוב כלי העיצוב עובדים בעיקר עם פיקסלים. כאשר מיישמים עיצובים:
חלק מכלי העיצוב כוללים תוספים שיכולים לעזור בתהליך ההמרה הזה אוטומטית.
דפדפנים מטפלים בערכים תת-פיקסל בצורה שונה. חלק מהדפדפנים מעגלים לפיקסל הקרוב ביותר, בעוד אחרים תומכים בהמרה תת-פיקסלית עבור סקלאינג חלק יותר. זה יכול לגרום לעיתים לאי-סדרים קלים בין דפדפנים, במיוחד עם ערכי REM/EM קטנים או כאשר משתמשים בהמרות. עבור רוב המקרים, ההבדלים הללו זניחים.
אין הבדל משמעותי בביצועים בין שימוש בפיקסלים, REM או EM בדפדפנים מודרניים. הבחירה של יחידות צריכה להתבסס על דרישות העיצוב, התנהגות רספונסיבית וצרכי נגישות ולא על שיקולי ביצועים.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
מארקוט, איתן. "Responsive Web Design." A List Apart, 25 במאי 2010. https://alistapart.com/article/responsive-web-design/
רוטר, ריצ'רד. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
"The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
הפסיקו להיאבק בהמרות ידניות של יחידות CSS ותנו לממיר ה-PX, REM ו-EM שלנו לעשות את העבודה בשבילכם. בין אם אתם בונים אתר רספונסיבי, יוצרים מערכת עיצוב, או פשוט לומדים על יחידות CSS, הכלי הזה יחסוך לכם זמן ויבטיח דיוק. הזן את הערכים שלך עכשיו כדי לראות כמה קל יכולה להיות המרת יחידות!
גלה עוד כלים שעשויים להיות שימושיים עבור זרימת העבודה שלך