איך להשתמש בו
- הגדר את גודל הגופן של השורש אם האתר שלך משנה אותו (לדוגמה html { font-size: 62.5% } הופך אותו ל-10px).
- הקלד ערך באחד השדות כדי להמיר px ל-rem או rem ל-px. עבור ל-em אם אתה קובע גודל ביחס לאלמנט הורה.
- השתמש בטבלה לחיפוש מהיר, או הדבק קטע CSS כדי להמיר את כל ערכי ה-px בבת אחת ולהעתיק את התוצאה.
איך זה עובד
rem = px ÷ גודל הגופן של השורש. עם שורש ברירת המחדל של 16px, 24px הם 1.5rem ו-14px הם 0.875rem. em משתמש באותה נוסחה אבל עם גודל הגופן של אלמנט האב, ולכן ערכי em מקוננים מתרבים; rem נמנע מכך מכיוון שהוא תמיד מתייחס לשורש.
שימוש ב-rem עבור גדלי גופן ורווחים מאפשר לטקסט להתרחב כאשר מישהו מגדיל את גודל הגופן המוגדר כברירת מחדל בהגדרות הדפדפן שלו, דבר שעוזר לאנשים עם ראייה חלשה. הערכים מעוגלים לארבע ספרות עשרוניות.
ממיר הקטעים משנה מספרים ואחריהם px. הוא משאיר הערות, url(…) ומחרוזות במרכאות ללא שינוי, שומר על 1px אם תבקשו (גבולות דקים בדרך כלל צריכים להישאר 1px), כותב 0px כ-0, וברירת המחדל משאיר תנאי @media ו-@container ללא שינוי, מכיוון שבשאילתות מדיה rem ו-em תמיד מתייחסים לגודל הגופן ההתחלתי של הדפדפן, ללא קשר לגודל הגופן הבסיסי שתגדירו. הוא אינו מבין את הסמנטיקה של calc() מעבר להחלפת מספרי ה-px בתוכו, וזה עדיין נכון מכיוון שכל אורך מומר בפני עצמו.
דוגמאות
גודל שורש ברירת מחדל
עם שורש של 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
טריק ה-62.5%
אם ה-CSS שלך מגדיר html { font-size: 62.5% }, השורש הוא 10px, ולכן 14px = 1.4rem ו-24px = 2.4rem. הגדר את שדה גודל הגופן של השורש ל-10 כדי להתאים.
המרת רכיב
padding: 24px 16px; border: 1px solid #ddd; הופך ל- padding: 1.5rem 1rem; border: 1px solid #ddd; כאשר האפשרות "שמור על ערכי 1px" מופעלת.
שאלות נפוצות
האם עלי להשתמש ב-rem או ב-em?
השתמשו ב-rem עבור רוב גדלי הגופן, הרווחים והפריסה, מכיוון שהוא צפוי בכל מקום. השתמשו ב-em כאשר משהו צריך להתרחב יחד עם גודל הטקסט של הרכיב שלו, כמו padding בתוך כפתור.
מדוע לא להמיר שאילתות מדיה ל-rem?
אתם יכולים, אבל בשאילתת מדיה 1rem תמיד שווה לגודל הגופן המוגדר כברירת מחדל של הדפדפן (בדרך כלל 16px), לא לגודל הגופן שהוגדר ב־html שלכם. הממיר מדלג עליהן כברירת מחדל; בטלו את האפשרות אם אתם מחלקים ב־16 בכל מקרה.
האם rem טוב יותר לנגישות מאשר px?
לגבי גדלי גופן, כן: rem מכבד את הגדרת גודל הגופן המוגדר כברירת מחדל של המשתמש, בעוד שגדלי גופן ב-px מתעלמים ממנה. זום הדפדפן עובד עם שתי היחידות.
פרטיות
ההמרות וקטע ה-CSS מעובדים בדפדפן שלך ולעולם לא נשלחים לשום מקום.