Convert from:
Converted values
px
16px
rem
1rem
em
1em
pt
12pt
%
100%
px → rem reference (base 16px)
| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 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 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
Category:css
Mode:Offline
Version:1.0.0
Access:Free
מהו ממיר יחידת CSS?
ממיר יחידות CSS מתרגם אורך בין היחידות ש-CSS משתמש בהן לצורך גודל סוג ופריסה: px, rem, em, pt ו-%. זה קיים מכיוון שעיצוב רספונסיבי מודרני נשען על יחידות יחסיות - קנה מידה rem ו-em עם הגדרות גודל הגופן והזום של המשתמש - בעוד שמוקאפים עיצוביים וגיליונות סגנונות ישנים יותר מתבטאים בדרך כלל בפיקסלים קבועים. כלי זה לוקח ערך כמו 24px ומציג אותו כ-1.5rem, 1.5em, 18pt ו-150% בבת אחת, ועובד לכל כיוון משדה בודד.
ההמרות כולן תלויות במספר אחד: גודל הגופן root (base), שברירת המחדל היא 16px כי זו ברירת המחדל של הדפדפן עבור רכיב ה-html. rem אחד תמיד שווה לגודל הגופן הבסיסי הזה, אז ב-16px הערך 16px הוא 1rem, 24px הוא 1.5rem, ו-8px הוא 0.5rem. נקודות קשורות לפיקסל הייחוס של CSS - 1 אינץ' הוא 96px ו-72pt - אז 1pt שווה 96/72, בערך 1.333px. מתייחסים לאחוז כחלק מגודל הגופן הבסיסי, כך ש-100% שווה לבסיס ו-50% שווה למחצית ממנו.
הכל פועל בדפדפן שלך תוך כדי הקלדה, כך שאין העלאה, אין המתנה בשרת, ואין הגבלה על כמה ערכים אתה ממיר. שנה את גודל הגופן הבסיסי לדגם רכיב שמגדיר את גודל הגופן שלו, קרא את התוצאות בכל יחידה והעתק את האחת שאתה צריך. טבלת ה-PX-to-REM המובנית נותנת לך התייחסות מוכנה לגדלים שעולים הכי הרבה בקנה מידה מסוג.
כיצד להשתמש בממיר יחידת CSS?
1
הזן ערך ובחר את היחידה שלו
הקלד את המספר שברצונך להמיר ובחר את היחידה שבה הוא נמצא כעת - px, rem, em, pt או %. באפשרותך גם להדביק ערך עם היחידה שלו, כמו 24px, והכלי יקרא עבורך את היחידה.
2
הגדר את גודל הגופן הבסיסי
התאם את גודל גופן השורש אם הפרויקט שלך משתמש במשהו אחר מאשר ברירת המחדל של דפדפן 16 פיקסלים. זה שולט כיצד REM, EM ו-% מתייחסים לפיקסלים.
3
קרא כל יחידה בבת אחת
הממיר מציג את הערך המקביל בכל היחידות הנתמכות באופן מיידי, כל אחת עם סיומת היחידה שלו כך שתוכל להפיל אותה ישר לתוך CSS.
4
העתק או השתמש בטבלת הפניות
העתק כל תוצאה בלחיצה אחת, או סרוק את טבלת ההתייחסות PX-to-REM עבור הגדלים הנפוצים בסולם טיפוגרפי.
תכונות מפתח
כל יחידה בבת אחת
הזן ערך אחד וראה באופן מיידי PX, REM, EM, PT ו-% זה לצד זה, כל אחד מעוצב עם היחידה שלו כך שתוכל להדביק אותו ישירות בגיליון סגנונות.
גודל גופן בסיס ניתן להגדרה
גודל גופן השורש מתכוונן, כך שהמרות rem, em ו-% תואמות לפרויקט שלך - בין אם אתה משתמש בברירת המחדל של 16 פיקסלים, טריק של 10 פיקסלים "62.5%" או גודל גופן ברמת הרכיב.
דו כיווני, בכל כיוון
אין "מ" ו-"to" קבועים. המר px ל-rem, rem ל-px, px ל-em, או pt ל-px - כל יחידה ליחידה כלשהי - מקלט בודד.
טבלת התייחסות PX-TO-REM
טבלה מובנית מפרטת את המקבילות REM, EM, PT ו-% עבור גדלי הפיקסלים המופיעים ביותר בסולמות סוגים, כך שתוכל לגלגל גלגל גלגלי גלגלי עין בבסיס שבחרת.
Frequently Asked Questions
חלקו את ערך הפיקסלים בגודל גופן השורש. ברירת המחדל של הדפדפן של 16 פיקסלים, REM = PX ÷ 16, כך ש-16 פיקסלים הוא 1REM, 24 פיקסלים הוא 1.5 REM ו-8 פיקסלים הוא 0.5Rem. הזן את ערך הפיקסלים בממיר והמקבילה REM מופיעה באופן מיידי בכל גודל גופן בסיס שתגדיר.
Related Tools
CBS
css
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CCG
css
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS
css
CSS Gradient Generator
Create beautiful CSS gradients with live preview
CTS
css
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
px to rem converterrem to px converterpx to em convertercss unit converterpx to pt converterrem calculatorem to pxcss font size converterpixel to remresponsive font size converter