בפעם הראשונה שמעצב מסר לי מפרט שאמר "טקסט גוף 16px, כותרות 28px, אותיות קטנות 13px" והליד הקדמי אמר " אבל אנחנו שולחים הכל ב-rem," עשיתי את החלוקה ביד באפליקציית מחשבון. שש עשרה מעל שש עשרה זה אחד, עשרים ושמונה מעל שש עשרה זה נקודה שבע חמש, שלוש עשרה מעל שש עשרה זה אפס נקודה שמונה אחת שתיים חמש. ואז גודל הגופן הבסיסי השתנה לעשרה פיקסלים עבור "62.5%" הגדרה על פרויקט אחר, ועשיתי הכל שוב. אחרי הפעם השלישית שבניתי ממיר קטן לתוך זרימת העבודה של Toolz.dev, וזה הציל אותי בשקט מטעויות אריתמטיות כמעט בכל רכיב שעיצבתי מאז.
TL;DR: ממיר יחידת CSS הופך ערך ביחידה אחת - px, rem, em, pt או % - לערך המקביל בכל יחידה אחרת, בהתבסס על גודל גופן שורש שבו אתה שולט (16px כברירת מחדל) כדי להמיר px ל-rem, חלק את הפיקסלים בגודל גופן השורש:
24px ÷ 16 = 1.5rem. כדי ללכת לכיוון השני, הכפל:1.5rem × 16 = 24px. ה ממיר יחידת CSS עושה זאת באופן מיידי עבור כל יחידה בבת אחת, פועל כולו בדפדפן שלך וכולל טבלת הפניות px-to-rem ממנה תוכל להעתיק.
מדריך זה מכסה כיצד היחידות קשורות, מדוע גודל הגופן הבסיסי כל כך חשוב, מתי להגיע לכל יחידה, ואת המתמטיקה המדויקת שהממיר פועל. עיצבתי הרבה ממשקים על פני ערכות נושא של וורדפרס, ממשק המשתמש של WP Adminify admin ו-React לוחות מחוונים, ושאלת היחידה עולה בכולם. הכללים פשוטים ברגע שאתה רואה את המספר היחיד שהכל תלוי בו.
מדוע המרת px ל-rem חשובה?
פיקסלים הם היחידה כמעט כל כלי עיצוב יצוא. Figma, Sketch, ו Photoshop כולם חושבים בפיקסלים, כך מפרט מסירה הוא רשימה של ערכי פיקסלים.Pixels הם גם קל לנמק על כי פיקסל CSS אחד הוא גודל התייחסות קבוע שאינו משתנה כאשר המשתמש מתאים שום דבר.
הקביעות הזו היא בדיוק הבעיה עבור ממשקים נגישים ומגיבים. כאשר מישהו מגדיל את הדפדפן שלו #39; גודל גופן ברירת המחדל שלו - הגדרה שאנשים רבים עם ראייה לקויה מסתמכים עליה - טקסט בגודל פיקסלים קבועים מתעלם מהשינוי לחלוטין. טקסט בגודל rem סולמות איתו. הדבר נכון גם לגבי זום דפדפן בכמה תצורות ישנות יותר ושל גיליונות סגנונות של משתמשים. אם אתה רוצה שהטיפוגרפיה שלך תכבד את העדפות הקורא ו-#39;s, אתה מגדיל אותו ביחידה יחסית, ו-rem הוא זה שמתנהג כצפוי על פני עמוד שלם.
אז זרימת העבודה הנפוצה היא: עיצוב בפיקסלים, ספינה ב-rem. זה משאיר אותך עושה חלוקה כל היום, וחלוקה היא המקום שבו שגיאות קטנות מתגנבות פנימה. כְּתִיבָה 0.8125rem במקום 0.875rem עבור ערך 13px הוא סוג של שגיאת הקלדה שנשלחת לייצור וגורמת לתווית אחת להיראות שגויה בעדינות. ממיר מסיר את הסיכון הזה, וזו כל הסיבה שאני שומר אחד בהישג יד. אם אתה עובד על פני הרבה מהמשימות האלה, הרחב יותר ערכת כלים למפתחי אינטרנט מכסה היכן המרת יחידה מתאימה לצד שאר העבודות היומיומיות.
מה ההבדל בין px, rem, em, pt ו-%?
כל אחת מהיחידות הללו נפתרת למספר פיקסלים של CSS בזמן רינדור, קשר ערכי ויחידות CSS רמה 4 פינים למטה: פיקסל הייחוס מוגדר מול צג של 96 dpi, לא מול המסך שלך. ההבדל הוא מול מה הם נמדדים.
px הוא פיקסל ההתייחסות CSS. זוהי יחידה מוחלטת במובן זה שהיא אינה תלויה בגודל גופן כלשהו. 1px הוא 1px. זה הופך אותו לצפוי אך גם לא מגיב להעדפות המשתמש.
rem פירושו "root em." rem אחד שווה לגודל הגופן של אלמנט השורש - ה html אלמנט.By default that is 16px, so 1rem הוא 16px, 1.5rem הוא 24px, ו 0.5rem הוא 8px. מכיוון שהוא תמיד קשור לשורש, ערך rem אומר את אותו הדבר בכל מקום במסמך, לא משנה כמה האלמנט מקונן עמוק.
em הוא ביחס לגודל הגופן של נוכחי אֵלֵמֶנט.If an element's גודל גופן הוא 20px, אז 1em בפנים זה 20px, 1.5em הוא 30px, וכן הלאה. the catch is that em compounds: if a parent sets font-size: 1.2em וגם ילד קובע 1.2em, הילד's גודל יעיל הוא 1.2 × 1.2 של הסבא והסבתא כלי זה מניח אלמנט בגודל בבסיס, אז em ו rem לקרוא אותו הדבר - ואתה מודל em ספציפי הקשר על ידי הגדרת גודל גופן הבסיס לאותו אלמנט & #39;s גודל.
pt האם הנקודה, בירושה מטיפוגרפיה הדפסה.CSS מגדיר אינץ' אחד כ-96 פיקסלים ו-72 נקודות, אז 1pt שווה 96/72 → 1.333px, ו 1px שווה ל-0.75pt. נקודות שייכות לגיליונות סגנונות הדפסה; על המסך הם רק כפולה קבועה של פיקסל הייחוס.
% עבור גודל הגופן הוא אחוז מההורה (או, בשורש, מהבסיס). 100% שווה לגודל הייחוס ו 50% שווה חצי ממנו בבסיס 16 פיקסלים, 100% הוא 16px ו 150% הוא 24px.
הנה איך הערכים הנפוצים מסתדרים בשורש ברירת המחדל של 16px:
| px | rem | em | pt | % |
|---|---|---|---|---|
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
ה ממיר יחידת CSS יוצר את כל הטבלה הזו עבור כל בסיס שאתה מגדיר, כך שתוכל לגלגל עין בקנה מידה שלם בבת אחת.
איך גודל הגופן הבסיסי משנה הכל?
גודל הגופן הבסיסי (שורש) הוא הציר עבור כל יחידה יחסית שנה אותו וכל המרה של rem, em ו-% משתנה איתו, בעוד px ו-pt נשארים במקום.
ברירת המחדל של הדפדפן היא 16px, וזו הסיבה 1rem הוא רגיל 16px. אבל אתה יכול להגדיר את השורש לכל דבר. דפוס פופולרי קובע html { font-size: 62.5%; }, מה שהופך את השורש ל-10 פיקסלים (62.5% מ-16). עַכשָׁיו 1rem הוא נקי 10px, ומתמטיקה rem הופכת ל-" הזז את הנקודה העשרונית": 1.6rem הוא 16px, 2.4rem הוא 24px, 0.8rem הוא 8px. הצוותים מאמצים זאת כך שהמספרים בגיליונות הסגנונות שלהם נקראים כמעט כמו פיקסלים ועדיין משנים את קנה המידה עם העדפות המשתמש.
כדי לדגמן את זה בממיר, הגדר את גודל הגופן הבסיסי ל-10 וקרא את העמודה rem. ערך של 24 פיקסלים מופיע כעת כ-2.4rem במקום 1.5rem. כך גם אתה חושב על em ברכיב שמגדיר את גודל הגופן שלו: אם כרטיס מגדיר font-size: 20px, ואז ערכי em בתוכו הם ביחס ל-20, אז הגדר את הבסיס ל-20 כדי לראות מה 1.5em מחליט ל.
הטעות שאני רואה לרוב היא לשכוח מול איזה בסיס ערך חושב מישהו ממיר 24px ל-1.5rem בהנחה של שורש 16px, ואז מפיל אותו לפרויקט שמריץ את הטריק של 62.5% שבו השורש הוא 10px - ו-1.5rem יש 15px, לא 24px היחידה יחסית, אז המספר אומר משהו רק ברגע שאתה מכיר את הבסיס בכל פעם שאני מדביק ערך rem בין פרויקטים, אני בודק קודם את גודל גופן השורש.
איך ממירים px ל-rem ו-rem ל-px ביד?
המתמטיקה היא חלוקה אחת וכפל אחד.
px ל-rem: חלקו את ערך הפיקסל בגודל גופן השורש.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem ל-px: הכפל את ערך rem בגודל גופן השורש.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px לem משתמש באותה נוסחה כמו rem כאשר האלמנט יושב בגודל הגופן הבסיסי, אז 24px ÷ 16 = 1.5em. ההבדל הוא מושגי, לא אריתמטי: em נמדד מול האלמנט הנוכחי, כך שאם האלמנט הזה 's הגודל שונה מהשורש, אתה משתמש בגודלו כבסיס.
px ל-pt: הכפל ב-0.75, כי 1px = 0.75pt. כך 16px × 0.75 = 12pt. הולך לכיוון השני, pt × 1.333 = px.
px עד %: מחלקים בבסיס ומכפילים ב-100. אז 24px ÷ 16 × 100 = 150%.
כל זה לא קשה, אבל לעשות את זה ארבעים פעמים בזמן עיצוב רכיב זה המקום שבו עייפות מייצרת שגיאות הקלדה. זה בדיוק סוג המשימה החוזרת על עצמה, המועדת לטעויות כלי פרודוקטיביות למפתחים הפילוסופיה אומרת להפוך לאוטומטי - להוריד את החשבון כך שתשומת הלב שלך תישאר על העיצוב.
מתי כדאי להשתמש בכל יחידה?
אין יחידה אחת נכונה; יש יחידה מתאימה לכל עבודה.
השתמש ב-rem עבור גדלי גופנים. זוהי ההמלצה החזקה ביותר ברשימה.Rem מאזניים עם המשתמש's דפדפן גופן-גודל העדפה, המהווה ניצחון נגישות אמיתי, ומכיוון שהוא מעוגן לשורש זה לא מורכב באופן בלתי צפוי רוב הצוותים גודל כל הסוג שלהם ב rem.
השתמש ב-rem או px למרווחים, בהתאם למערכת שלך. מערכות עיצוב רבות מבטאות שוליים וריפוד ברמי כך שמרווחי מרווחים עם סוג. אחרים שומרים על מרווח ב-px עבור פריסות מושלמות לפיקסלים. שניהם ניתנים להגנה; בחר אחד והיה עקבי.
השתמש ב-em לדברים שצריכים להתאים לאלמנט משלהם. ריפוד על כפתור שאמור לגדול עם הכפתור' גודל הגופן הוא שימוש קלאסי ב-em - הגדר את הריפוד ב-em והוא עוקב אחר הטקסט באופן אוטומטי. גודל סמל ביחס לטקסט סמוך הוא אחר.
השתמש ב-px עבור גבולות ופרטים עדינים. א 1px הגבול צריך להישאר בדרך כלל 1px; לעתים רחוקות אתה רוצה קו שיער בקנה מידה עם גודל גופן. נקודות שבירה של שאילתות מדיה נכתבות לעתים קרובות גם ב-px, אם כי יש המעדיפים em שם להתנהגות זום.
השתמש ב-pt רק בגיליונות סגנונות הדפסה. אם אתה מעצב משהו עבור @media print, נקודות הן יחידת ההדפסה המקורית ושווה להשתמש בה. על המסך, העדיפו px או rem.
השתמש ב-% עבור רוחבי נוזלים ומדי פעם גדלי גופנים. האחוז נמצא בכל מקום בפריסה (width: 50%), וכגודל גופן הוא משמש לפעמים בשורש עבור הטריק של 62.5%.
מהן הטעויות הנפוצות עם יחידות CSS?
הראשון הוא בעיית אי-התאמה בסיסית שתוארה כבר: המרה כנגד גודל גופן שורש שגוי. תמיד דע את השורש שלך לפני שאתה סומך על מספר rem.
השני הוא ערכי rem מדויקים מדי חלק מההמרות לא מתחלקות באופן שווה - 15px בבסיס 16px הוא 0.9375rem, ו-13px הוא 0.8125rem. העשרונים הארוכים האלה מדויקים אבל מכוערים, ועיגולם חזק מדי (נגיד ל-0.94rem) מעביר את הגודל המעובד בשבריר של פיקסל הכלל שלי: שמור שלושה או ארבעה עשרונים עבור rem, או בחר ערכי בסיס וגודל שמתחלקים בצורה נקייה הממיר מתעגל בצורה הגיונית ומקצץ אפסים נגררים כך 24px קורא כמו 1.5rem יותר מאשר 1.5000rem.
השלישי הוא חיבור em. אלמנטים מקננים שכל אחד מהם מגדיר גודל גופן em מכפיל את האפקט, כך שפריט מקונן עמוק יכול בסופו של דבר להיות גדול או קטן בהרבה מהמתוכנן. אם אתה מוצא em מפתיע, ההרכבה הזו היא כמעט תמיד הסיבה - החלף את אלה ל-rem וההפתעה נעלמת.
הרביעי הוא בהנחה ש-pt ו-px ניתנים להחלפה. הם לא; 12pt הוא 16px, לא 12px. ערבוב שלהם בגיליון סגנונות המשתרע על מסך והדפסה הוא באג עדין.
כיצד מטפל ממיר Toolz.dev במתמטיקה?
מתחת למכסה המנוע הממיר משתמש ברעיון אחד: לבטא כל יחידה כמספר פיקסלים, ואז להמיר דרך פיקסלים לכל יחידה יש " פיקסלים קבועים ליחידה" בהינתן גודל הגופן הבסיסי - px הוא 1, rem ו-em הם הבסיס, pt הוא 96/72, ו-% הוא בסיס/100. כדי להמיר, הוא מכפיל את הקלט ביחידה שלו 's פיקסלים ליחידה כדי לקבל ערך פיקסל, ואז מחלק ביחידת היעד 's פיקסלים ליחידה. המעבר היחיד הזה נותן כל יחידה בבת אחת, וזו הסיבה שאתה רואה px, rem, em, pt ו-% עדכון ביחד תוך כדי הקלדה.
זה גם מנתח ערכים עם יחידות מחוברות, אז הדבקה 24px ממלא גם את המספר וגם את היחידה בשבילך התוצאות מעוגלות לכמה מקומות עשרוניים ומופשטות מאפסים נגררים לקריאה, ולכל אחד יש כפתור העתקה בלחיצה אחת שמעתיק את הערך עם סיומת היחידה שלו מוכנה להדבקה ב-CSS. הכל פועל בצד הלקוח - שום דבר שאתה מקליד לא מועלה - התואם את גישה פרטית-ראשונה מאחורי כל כלי באתר.
אם אתה גם בוחר צבעים או בונה צללים עבור אותו רכיב, ה מחולל שיפוע CSS ו מחולל צללים חי במרחק קליק אחד, והרחב יותר ממיר יחידה מטפל ביחידות פיזיות כמו אורך ומשקל כאשר העבודה שלך תועה מחוץ ל-CSS.
שאלות נפוצות
איך אני ממיר PX ל-REM?
חלקו את ערך הפיקסלים בגודל גופן השורש. ברירת המחדל של הדפדפן של 16 פיקסלים, REM = PX ÷ 16, כך ש-16 פיקסלים הוא 1REM, 24 פיקסלים הוא 1.5 REM ו-8 פיקסלים הוא 0.5Rem. הזן את ערך הפיקסלים בממיר והמקבילה REM מופיעה באופן מיידי בכל גודל גופן בסיס שתגדיר.
איך אני ממיר REM ל-PX?
הכפל את ערך REM בגודל גופן השורש. בבסיס של 16 פיקסלים, PX = REM × 16, כך ש-1Rem הוא 16px, 1.5Rem הוא 24px, ו-0.75Rem הוא 12px. שנה את גודל הגופן הבסיסי בכלי אם רכיב ה-HTML שלך משתמש בערך אחר.
מהו גודל גופן השורש המוגדר כברירת מחדל?
דפדפנים מגדירים את רכיב ה-html ל-16px כברירת מחדל, וזו הסיבה שהממיר הזה מתחיל ב-16. מכיוון ש-1rem תמיד שווה לגודל גופן השורש, ברירת המחדל הזו הופכת את 16px לשווה בדיוק ל-1rem. משתמשים יכולים לשנות את הדפדפן שלהם's גודל טקסט ברירת מחדל, וזו אחת הסיבות ש-rem מועדף עבור טיפוגרפיה נגישה וניתנת להרחבה.
מה ההבדל בין REM ל-EM?
rem תמיד ביחס לגודל הגופן html השורש, כך שהוא נשאר עקבי על פני כל העמוד. em הוא ביחס לגודל הגופן של האלמנט הנוכחי, כך שהוא יכול להרכיב כאשר אלמנטים מקוננים כל אחד מגדיר את הגודל שלו. הגדר את גודל הגופן הבסיסי בכלי למודל של הקשר em ספציפי.
איך PX ו-PT קשורים ב-CSS?
CSS מגדיר אינץ אחד כ-96 פיקסלים ו-72 נקודות, כך ש-1pt שווה ל-96/72 → 1.333px, ו-1px שווה ל-0.75pt. נקודות מגיעות מטיפוגרפיה של הדפסה; על המסך הם כפולה קבועה של פיקסל הייחוס של CSS. השתמש ב-px או rem לעבודת מסך ושמור pt עבור גיליונות סגנונות הדפסה.
מה עושה הטריק בגודל גופן של 62.5%?
הגדרת גודל הגופן html ל-62.5% הופכת את גודל הגופן השורש ל-10px, כך ש-1rem הופך ל-10px נוח ומתמטיקה של rem הופכת להזזת העשרוני - 1.6rem הוא 16px, 2.4rem הוא 24px. כדי לדגמן זאת בממיר, הגדר את גודל הגופן הבסיסי ל-10 וקרא את עמודת ה-rem.
האם עלי להשתמש ב-PX או REM עבור גדלי גופנים?
Rem מועדף בדרך כלל עבור גדלי גופנים מכיוון שהוא משתנה עם המשתמש' העדפת גודל גופנים בדפדפן, המשפרת את הנגישות, בעוד px קבוע לא. צוותים רבים מעצבים ב-px וממירים ל-rem עבור ה-CSS הסופי. פרטי פריסה כמו גבולות נשארים לעתים קרובות ב-px.
מדוע לערך המומר יש לפעמים עשרונים ארוכים?
חלק מההמרות אינן מדויקות - 15px בבסיס 16px הוא 0.9375rem, וערכי pt מייצרים לעתים קרובות עשרוניות חוזרות הכלי מתעגל לכמה מקומות עשרוניים ומקצץ אפסים נגררים לקריאה לפריסות מושלמות לפיקסלים, עגול ערכי rem לשניים או שלושה עשרונים או בחר בסיס שמחלק את הגדלים שלך בצורה נקייה.
