דלג לתוכן
🛠️
Whiz Tools

מרכז המרה מפיקסלים ל-REM ו-EM – מחשבון יחידות CSS חינמי

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

מרכז המרת יחידות PX, REM ו-EM

המר בין יחידות פיקסלים (PX), שורש אם (REM), ואם (EM). הזן ערך בכל שדה כדי לראות את הערכים השווים ביחידות אחרות.

px
px
px
rem
em
הדמיה אינה זמינה עבור ערכים שליליים או אפס

נוסחאות המרה

  • PX ל-REM: ערך בפיקסלים ÷ גודל גופן שורש
  • PX ל-EM: ערך בפיקסלים ÷ גודל גופן הורה
  • REM ל-PX: ערך ב-rem × גודל גופן שורש
  • EM ל-PX: ערך ב-em × גודל גופן הורה
מחשבון טעינה...
📚

תיעוד

מרכז המרת יחידות PX, REM ו-EM: הסבר יחידות CSS חיוניות

למה המרת יחידות CSS חשובה לפיתוח אתרים מודרני

בעת בניית אתרים רספונסיביים, אחד האתגרים הנפוצים ביותר הוא תרגום מפרטי עיצוב ליחידות CSS גמישות וניתנות להרחבה. כנראה שראית עיצוב ב-Figma עם "padding: 24px" ותהית אם להשאיר אותו בפיקסלים או להמיר ליחידות rem. ההחלטה הזו משפיעה על הכל - מנגישות ועד לאופן שבו הפריסה שלך מגיבה כאשר משתמשים משנים את גודל הגופן בדפדפן שלהם.

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

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

הבנת יחידות CSS: PX, REM ו-EM

מהם פיקסלים (PX)?

פיקסלים (PX) מייצגים את יחידת CSS הפשוטה ביותר—מה שאתה מגדיר הוא מה שאתה מקבל. פיקסל CSS הוא יחידת התייחסות, לא בהכרח פיקסל מסך פיזי (במיוחד בתצוגות גבוהות DPI כמו מסכי Retina). הם מספקים גודל קבוע שאינו משתנה על בסיס גדלי גופנים או אלמנטים הוריים.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

מתי פיקסלים עובדים טוב:

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

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

מהם יחידות REM?

יחידות REM (root em) מתקנות בהתבסס על גודל הגופן של האלמנט השורשי—בדרך כלל אלמנט ה-<html>. רוב הדפדפנים מגדירים כברירת מחדל 16px, כך ש-1rem שווה ל-16px אלא אם כן שינית את גודל הגופן השורשי. הנה מה שהופך REM לעוצמתיות: הן מספקות קנה מידה עקבי וניתן לצפות בו לאורך האתר כולו.

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:

  • קנה מידה עקבי: שנה את גודל הגופן השורשי, והכל יתקנה יחסית
  • תאימות נגישות: כאשר משתמשים מתאימים את גודל הגופן בדפדפן, פריסות מבוססות REM מסתגלות אוטומטית
  • תחזוקה קלה יותר: עדכן ערכי רווח במקום אחד במקום לחפש דרך ערכי פיקסלים
  • אין בעיות צביר: שלא כמו יחידות EM, REM לא מצטברות כאשר אלמנטים מקוננים

טיפ מקצועי מהניסיון: הגדר את גודל הגופן השורשי ל-62.5% (מה שהופך 1rem ל-10px עם בסיס 16px מוגדר כברירת מחדל). זה הופך חישוב מנטלי לקל יותר—1.6rem = 16px, 2.4rem = 24px. רק זכור להגדיר את גודל הגופן של הגוף בחזרה ל-1.6rem כך שטקסט יהיה כברירת מחדל 16px. על פי מפרט ערכים ויחידות CSS של W3C, יחידות REM תמיד מתייחסות לאלמנט השורשי, מה שהופך אותן לצפויות בפריסות מורכבות.

מהם יחידות EM?

יחידות EM מתקנות יחסית לגודל הגופן של האלמנט ההורי, מה שהופך אותן למודעות הקשר. התנהגות זו שונה מיחידות REM, אשר תמיד מתייחסות לשורש. השם "em" מגיע מטיפוגרפיה—היסטורית הוא הפנה לרוחב האות הגדולה "M" בגופן נתון.

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 מבריקות:

  • עיצוב מבוסס רכיבים: ריפוד ושוליים שמשתנים עם גודל גופן
  • טיפוגרפיה: גבהי שורה עובדים טוב עם ערכים ללא יחידות או ems (כמו line-height: 1.5em)
  • מודולים עצמאיים: כפתורים או כרטיסים שמשמרים יחסים כאשר גודל גופן משתנה
  • שאילתות מדיה: על פי מסמכי MDN Web, יחידות EM בשאילתות מדיה מתייחסות לגודל הגופן המוגדר כברירת מחדל בדפדפן, ולא לאלמנט ההורי

מלכודת הצביר: הנה המקום שבו מפתחים נתקעים לעתים קרובות. יחידות EM מתקננות דרך אלמנטים מקוננים, מה שיכול ליצור תוצאות בלתי צפויות:

1.level-1 { font-size: 1.2em; }  /* 19.2px אם ההורה הוא 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

לאחר שלוש רמות של קינון, הטקסט שלך גדל ב-73% במקום 20% המיועדים. זו הסיבה שרבים מהמפתחים עברו ליחידות REM לטיפוגרפיה ברגע שתמיכת הדפדפן השתפרה.

נוסחאות וחישובי המרה

הבנת היחסים המתמטיים בין יחידות PX, REM ו-EM חיונית להמרות מדויקות. להלן הנוסחאות המשמשות בממיר שלנו:

המרת PX ל-REM

להמרת פיקסלים ליחידות REM, חלק את ערך הפיקסלים בגודל הגופן השורשי:

REM=PXrootFontSizeREM = \frac{PX}{rootFontSize}

לדוגמה, עם גודל גופן שורשי של 16px:

  • 16px = 1rem
  • 24px = 1.5rem
  • 8px = 0.5rem

המרת PX ל-EM

להמרת פיקסלים ליחידות EM, חלק את ערך הפיקסלים בגודל הגופן של האלמנט ההורה:

EM=PXparentFontSizeEM = \frac{PX}{parentFontSize}

לדוגמה, עם גודל גופן הורה של 16px:

  • 16px = 1em
  • 24px = 1.5em
  • 8px = 0.5em

המרת REM ל-PX

להמרת יחידות REM לפיקסלים, הכפל את ערך REM בגודל הגופן השורשי:

PX=REM×rootFontSizePX = REM \times rootFontSize

לדוגמה, עם גודל גופן שורשי של 16px:

  • 1rem = 16px
  • 1.5rem = 24px
  • 0.5rem = 8px

המרת EM ל-PX

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

PX=EM×parentFontSizePX = EM \times parentFontSize

לדוגמה, עם גודל גופן הורה של 16px:

  • 1em = 16px
  • 1.5em = 24px
  • 0.5em = 8px

המרת REM ל-EM

להמרת יחידות REM ליחידות EM, עליך להתחשב הן בגודל הגופן השורשי והן בגודל הגופן של האלמנט ההורה:

EM=REM×rootFontSizeparentFontSizeEM = REM \times \frac{rootFontSize}{parentFontSize}

אם גודל הגופן השורשי והגופן ההורה זהים (למשל, 16px), אזי 1rem = 1em.

המרת EM ל-REM

להמרת יחידות EM ליחידות REM, השתמש בנוסחה הבאה:

REM=EM×parentFontSizerootFontSizeREM = EM \times \frac{parentFontSize}{rootFontSize}

שוב, אם שני גדלי הגופן שווים, אזי 1em = 1rem.

כיצד להשתמש במרכז ההמרה של PX ל-REM ל-EM

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

מדריך התחלה מהירה

  1. הזינו את הערך בכל שדה—פיקסלים, REM, או EM
  2. בדקו את התוצאות מיידית ביחידות האחרות
  3. התאימו גדלי גופנים להתאמה לפרויקט שלכם:
    • גודל גופן שורש: מה שהגדרתם על רכיב ה-<html> (בדרך כלל 16px)
    • גודל גופן הורה: גודל הגופן של ההורה של האלמנט הספציפי (גם כן בדרך כלל 16px)
  4. העתיקו את הערך שאתם צריכים באמצעות כפתור ההעתקה

קבלת תוצאות מדויקות לפרויקט שלכם

הממיר מגדיר כברירת מחדל 16px עבור גדלי גופנים של שורש והורה כי זהו תקן הדפדפן. אבל הנקודה החשובה היא: לפרויקט שלכם עשויים להיות ערכים שונים.

מציאת גודל גופן השורש: פתחו את כלי המפתחים של הדפדפן, בדקו את רכיב ה-<html>, וודאו את גודל הגופן המחושב. אם הגדרתם html { font-size: 62.5%; }, גודל גופן השורש שלכם הוא 10px (62.5% מ-16px).

מציאת גודל גופן ההורה: עבור המרות EM, אתם צריכים את גודל הגופן של רכיב ההורה הספציפי שבו אתם מחילים את הסגנון. בדקו את הרכיב בכלי פיתוח כדי לראות את גודל הגופן המחושב. אם להורה יש font-size: 1.2rem והשורש שלכם הוא 16px, הגדירו את גודל גופן ההורה ל-19.2px לחישובי EM מדויקים.

תרחישי המרה נפוצים

מעיצוב לקוד: בקובץ Figma שלכם מופיע padding: 24px. אתם רוצים להשתמש ביחידות REM לנגישות טובה יותר. הזינו 24 בשדה PX, ותראו שזה שווה ל-1.5rem (בהנחה של שורש 16px).

בניית רכיב כפתור: אתם רוצים שהריפוד יתאים לגודל הגופן של הכפתור. אם לכפתור יש font-size: 1.125rem (18px), הגדירו את גודל גופן ההורה ל-18, הזינו את ערך הריפוד הרצוי, והשתמשו בערך EM התואם.

טיפוגרפיה רספונסיבית: אתם יוצרים כותרת בגודל 32px בשולחן עבודה. הזינו 32px כדי לראות שזה 2rem, אשר יתאים בהתאמה כאשר משתמשים מתאימים את גודל הגופן בדפדפן שלהם.

המרת יחידות CSS בעולם האמיתי - מקרי שימוש

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

המרת קבצי עיצוב ל-CSS רספונסיבי

אתם מקבלים עיצוב Figma עם הכל מוגדר בפיקסלים. רכיב הכרטיס מציג:

  • ריפוד: 24px
  • גודל גופן כותרת: 28px
  • גודל גופן גוף: 16px
  • שוליים תחתונים: 40px

המרת ערכים אלה ליחידות REM (בהנחת שורש 16px) נותנת:

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

מה היתרון? כאשר משתמש עם לקות ראייה מגדיל את גודל הגופן המוגדר כברירת מחדל בדפדפן מ-16px ל-20px, הכרטיס שלכם גדל באופן יחסי. הריפוד, השוליים והטקסט גדלים ב-25%, תוך שמירה על איזון חזותי. עם ערכי פיקסלים, רק הטקסט היה גדל, ובכך היה שובר את הפריסה.

בניית ספריות רכיבים נגישות

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

1.button {
2  /* כפתור בסיסי בגודל גופן 16px */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* 12px 24px בגודל בסיסי */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* הריפוד הופך אוטומטית ל-15px 30px (0.75em × 20px) */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* הריפוד הופך אוטומטית ל-10.5px 21px (0.75em × 14px) */
17}
18

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

[השאר ימשיך באותו אופן...]

כיצד יחידות CSS התפתחו: מקבועות לגמישות

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

עידן הפיקסל המושלם (1990s-2000s)

אתרים מוקדמים תוכננו לרוחבי מסך ספציפיים—640px, לאחר מכן 800px, ואז 1024px. פריסות CSS השתמשו בפיקסלים באופן בלעדי כי כך מעצבי דפוס הבינו. אתרים נראו זהים בכל הדפדפנים (כאשר הם עבדו בכלל), אך נשברו לחלוטין במסכים בגדלים בלתי צפויים. האינטרנט טופל כמו דפוס: קבוע, מבוקר, צפוי.

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

קריאת ההתעוררות הניידת (2007-2010)

האייפון שינה הכל. פתאום, חלק משמעותי מהתעבורה הגיע ממסכים ברוחב 320px. זום בהחלקה עזר, אך אתרים שתוכננו למחשבים שולחניים ברוחב 1024px היו כואבים בניידים.

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

יחידות REM מצילות את המצב (2010-ההווה)

CSS3 הציג את יחידת REM סביב 2010, ופתר את הבעיה הגדולה ביותר של EM: ההצטברות. REM נתן לנו קנה מידה יחסי ללא מורכבות הירושה. Internet Explorer 9 הוסיף תמיכה ב-2011, ועד 2015, יחידות REM היו מרכזיות.

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

התפתחות זו—מפיקסלים קשיחים ליחידות יחסיות גמישות—משקפת ציפיות משתמשים שעברו מ"אתרים צריכים להיראות זהים בכל מקום" ל"אתרים צריכים לעבוד טוב בכל מקום".

דוגמאות קוד להמרת יחידות

פונקציות המרת יחידות ב-JavaScript

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
31

מאפיינים מותאמים של CSS להמרת יחידות

1: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}
34

מיקסינים של SCSS להמרת יחידות

1// פונקציות 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}
26

ממיר יחידות ב-Python

1def 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

טעויות נפוצות בהמרת יחידות CSS

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

טעות 1: אי התחשבות בגדלי גופן שורש מותאמים אישית

הבעיה: אתם ממירים 24px ל-1.5rem בהנחה שגודל גופן השורש המוגדר הוא 16px, אך הפרויקט שלכם משתמש ב-html { font-size: 62.5%; }, מה שהופך את השורש ל-10px. האלמנט שלכם מסתיים ב-15px במקום 24px.

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

טעות 2: שימוש ביחידות EM לטיפוגרפיה ברכיבים מקוננים

הבעיה: אתם בונים רכיב כרטיס עם font-size: 1.2em לכותרות. עובד מצוין. ואז אתם מקננים כרטיס בתוך כרטיס אחר, ופתאום הכותרת של הכרטיס הפנימי היא 1.44em (1.2 × 1.2), ולא 1.2em.

הפתרון: השתמשו ביחידות REM לטיפוגרפיה אלא אם כן אתם רוצים במיוחד את התנהגות הקסקדה. שמרו על יחידות EM לריווח שצריך להשתנן עם גודל הגופן המקומי.

טעות 3: המרת רוחבי גבולות ל-REM

הבעיה: אתם ממירים border: 1px ל-border: 0.0625rem לעקביות. כאשר משתמשים מגדילים או משנים גדלי גופן, הגבולות שלכם הופכים עבים ומכוערים.

הפתרון: השאירו גבולות בפיקסלים. גבולות תת-פיקסל (0.5px) להם תמיכה לא עקבית בדפדפנים, וגבולות נדירות הזקוקות להתאמת גודל עם טקסט.

טעות 4: שכחת שיחידות שאילתות מדיה מתייחסות להעדפות המשתמש

הבעיה: אתם כותבים @media (min-width: 768px) לנקודת שבירה של טאבלט. משתמשים שמגדירים גודל גופן ברירת מחדל גדול יותר לא מקבלים את פריסת הטאבלט כשהם צריכים.

הפתרון: השתמשו ביחידות EM או REM בשאילתות מדיה: @media (min-width: 48em). זה מכבד את העדפות הגופן של המשתמש, כפי שממליץ תיעוד העיצוב הרספונסיבי של MDN.

טעות 5: ערבוב שיטות חישוב

הבעיה: הSass שלכם משתמש בשיטת חישוב אחת, ה-JavaScript שלכם משתמש בשיטה אחרת, והחישוב המנטלי שלכם משתמש בשלישית. התוצאות לא תואמות, מה שגורם לתסכול של דחיפת פיקסלים.

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

שאלות נפוצות

מה ההבדל בין יחידות REM ו-EM?

נקודת ההתייחסות שונה לחלוטין. יחידות REM תמיד מסתכלות על גודל הגופן של רכיב ה-<html> השורשי - ללא קשר לעומק הקינון של האלמנט, 1rem שווה לערך המחושב זהה. יחידות EM מסתכלות על גודל הגופן של האלמנט ההורה הישיר, מה שיוצר אפקט מדורג.

חשבו על זה כך: אם תקננו שלושה רכיבי <div>, כל אחד עם font-size: 1.2em, הטקסט של ה-div הפנימי ביותר יהיה גדול משמעותית מהצפוי כי כל רמה מכפילה את הגודל. עם font-size: 1.2rem בכל רמה, כל שלושת ה-divים יהיו בגודל זהה כי כולם מתייחסים לשורש.

זו הסיבה שREM הפך פופולרי לטיפוגרפיה ברגע שתמיכת הדפדפנים השתפרה - הוא מבטל את העומס המנטלי של מעקב אחר שרשראות הורשה.

איזו יחידת CSS היא הטובה ביותר לעיצוב רספונסיבי?

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

השתמשו ב-REM עבור: רווח גלובלי, סולמות טיפוגרפיה, מרווחי רכיבים, וכל מדידה שצריכה להשתנן עם העדפות הגופן של המשתמש

השתמשו ב-EM עבור: רווח פנימי ברכיבים (ריפוד כפתורים, מרווחי כרטיסים), שאילתות מדיה (שמכבדות העדפות משתמש), ואלמנטים שצריכים להשתנות בהקשר המקומי שלהם

השתמשו בפיקסלים עבור: גבולות 1px (שנראים חדים), צללי תיבה (צללים עדינים דורשים דיוק), ורוחב קווי SVG

השתמשו באחוזים או יחידות viewport עבור: רוחב מכולות, קטעים בגובה מלא

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

[התרגום ממשיך באותו אופן עבור שאר הסעיפים]

מקורות וקריאה נוספת

  1. "מודול ערכים ויחידות CSS רמה 3." המלצת W3C. https://www.w3.org/TR/css-values-3/

  2. מרקוט, אתן. "עיצוב אתר רספונסיבי." A List Apart, 25 במאי 2010. https://alistapart.com/article/responsive-web-design/

  3. רוטר, ריצ'רד. "סגנון טיפוגרפי יישומי לאינטרנט." http://webtypography.net/

  4. "יחידות CSS." מסמכי MDN Web. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. "פיקסלים של CSS לעומת פיקסלים פיזיים." תיעוד Stack Overflow. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

  6. קויר, כריס. "האורכים של CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/

  7. "שימוש בתכונות מותאמות של CSS (משתנים)." מסמכי MDN Web. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. "הבנה ושימוש ביחידות rem ב-CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

התחל להמיר יחידות CSS בדיוק

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

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

עבור מפתחים העובדים על אתרים העומדים בדרישות נגישות, כלי זה מסייע להבטיח שהפריסות שלך מתרחבות כראוי כאשר משתמשים מתאימים את העדפות הגופנים - דרישה תחת WCAG 2.1 רמה AA. עבור אלה הבונים ספריות רכיבים, הוא מבהיר אילו ערכי EM יוצרים את היחסים הרצויים. עבור כל מי שמתרגם עיצובי Figma ל-CSS בייצור, הוא מאיץ משמעותית את תהליך ההמרה.

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