ממיר יחידת 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% שווה למחצית ממנו.

כל המרה לוקחת שני שלבים הכלי הופך תחילה את הקלט שלך לפיקסלים על ידי הכפלתו במספר הפיקסלים ביחידת קלט אחת, ואז מחלק את ערך הפיקסלים הזה במספר הפיקסלים ביחידת יעד אחת, בבסיס של 18 פיקסלים, 27 פיקסלים הופכים ל-27 § 18 = 1.5rem, ובכל בסיס 12pt הופך ל-12 × 96 ÷ 72 = 16px התוצאות מעוגלות לארבעה מקומות עשרוניים לכל היותר, כך ש-15px בבסיס של 16px קורא 0.9375rem. יחידות Viewport כגון vw ו-vh אינן חלק מהממיר, מכיוון שהן תלויות בגודל החלון ולא בגודל גופן. גודל גופן בסיס של אפס או פחות יורד בחזרה ל-16 פיקסלים.

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