איך ממירים px ל-rem עבור בסיס של 16px?

בחרו פיקסלים (px) ב-מ- ו-EM שורש (rem) ב-אל, הזינו את הערך, והשאירו את גופן שורש (px) על 16. התוצאה היא הערך מחולק בגודל גופן השורש, כך ש-24px הופך ל-1.5rem.

בין אילו יחידות אפשר להמיר?

פיקסלים (px), rem, em, נקודות (pt), vw, vh ואחוזים. הכל מחושב דרך פיקסלים, וכל שבע התוצאות מוצגות יחד עבור הערך שתזינו.

למה התוצאות של em, vw ו-% משתנות כשאני עורך את שדות ההקשר?

יחידות אלו תלויות ביחוס. em ו-% משתמשים ב-גופן הורה (px), vw משתמש ב-רוחב viewport (px), ו-vh משתמש ב-גובה viewport (px). rem משתמש ב-גופן שורש (px). הגדירו אותם כך שיתאימו לפריסה שלכם.

האם אפשר להמיר גיליון סגנונות שלם מ-px ל-rem?

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

איך מוצאים את מחלקת Tailwind התואמת לגודל?

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

האם זה באמת בחינם?

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

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

📐

ממיר Pixel ל-REM בחינם

המר בין px, rem, em, pt, vw, vh ו-% עם גודל גופן בסיס ניתן להגדרה. כולל טבלת ייחוס לגדלי פיקסלים נפוצים.

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

פועל לא-מקוון לאחר טעינה

מ-

אל

1rem

הקשר (משפיע על rem/em/vw/vh/%)

גופן שורש (px)

גופן הורה (px)

רוחב viewport (px)

גובה viewport (px)

כל ההמרות עבור 16 px

אסימוני Tailwind הקרובים ביותר (ב-16px root)

גדלי פיקסל נפוצים → rem (בבסיס 16px)

המר CSS מודבק

שימושים נפוצים

PX ל-REM לפיתוח אינטרנטהמר ערכי פיקסל ליחידות rem לCSS בר קנה מידה וגישה. הגדר את גודל הגופן הבסיסי וראה מיד את כל הערכים המקבילים.
יחידות CSS לעיצוב מגיבהמר בין px, vw, vh ו-% לבניית פריסות המגיבות כראוי לגדלי וכיווני מסך שונים.
המר מפרטי עיצוב ליחידות CSSתרגם ערכי פיקסל Figma או Sketch ליחידות rem/em עבור יישום CSS נקי וניתן לקנה מידה.
התייחסות יחידת Tailwind CSSהבן כיצד מחלקות גודל Tailwind CSS ממפות לערכי פיקסל ו-rem ליישום מדויק.
המר יחידות CSS לתבניות הדפסההמר בין px, pt ו-rem לשאילתות מדיום הדפסה ופלט PDF CSS.

כיצד זה עובד

כל ההמרות פועלות כולן בדפדפן שלך באמצעות מנוע חשבון כתוב-יד ללא תלויות. הכלי ממיר בין שבע יחידות CSS (px, rem, em, pt, vw, vh, ו-%) על ידי ניתוב כל חישוב דרך פיקסלים כבסיס משותף, מחיל חלוקה או הכפלה פשוטה מול גודל הגופן השורשי, גודל הגופן ההורי, או ממדי חלון התצוגה שהגדרת.

1
הגדר את ערכי ההקשר שלך
לפני ההמרה, אתה מגדיר את ארבעת המספרים שהופכים יחידות CSS יחסיות למשמעותיות: גודל גופן שורשי (ברירת מחדל 16px, שהיא ברירת המחדל של הדפדפן), גודל גופן אלמנט הורי (עבור המרות em ו-%), ורוחב וגובה חלון תצוגה (עבור vw ו-vh). אלה אותם ערכים שהדפדפן שלך היה משתמש בהם בפתירת CSS בזמן ריצה.
2
פיקסל כביניים אוניברסלי
הממיר תחילה קורא ל-toPixels() כדי לנרמל את הקלט שלך לספירת פיקסלים גולמית — לדוגמה, 1.5rem הופך ל-1.5 × baseFontPx, ו-50vw הופך ל-0.5 × vpWidth. אז fromPixels() מחלק את ספירת הפיקסלים הזו במקדם המתאים ליחידת היעד. כל שבע היחידות מוצגות בו-זמנית בטבלת ההמרה.
3
חיפוש אסימון Tailwind הקרוב ביותר
אחרי ההמרה, הכלי מחשב את ערך ה-rem וסורק שתי טבלאות חיפוש מקודדות-קשיח — שלושה עשר האסימונים של גודל-גופן של Tailwind (text-xs עד text-9xl) וסולם הריווח שלו — מוצא את ההתאמה הקרובה ביותר לפי מרחק מוחלט. סימן = פירושו שהערך הוא אסימון מדויק; ≈ פירושו שהוא הקירוב הקרוב ביותר.
4
שכתוב CSS באצווה דרך ביטוי רגולרי
פאנל הדבקת-CSS מקבל טקסט CSS גולמי ומחיל החלפת ביטוי רגולרי: במצב px→rem הוא מתאים כל אסימון px ומחליף את החלק המספרי עם value/baseFontPx + rem; במצב rem→px הוא עושה את ההפך. ספירת ההחלפות מוצגת כך שתוכל לוודא כמה ערכים נכתבו מחדש.