پرش به محتوا
🛠️
Whiz Tools

مبدل پیکسل به REM و EM - ماشین حساب رایگان واحدهای CSS

تبدیل فوری پیکسل به واحدهای REM و EM. مبدل رایگان واحدهای CSS برای طراحی وب واکنش‌گرا. پشتیبانی از اندازه‌های فونت سفارشی و محاسبات آنی برای نتایج دقیق.

مبدل واحدهای پیکسل (PX)، ریشه ام (REM) و ام (EM)

تبدیل بین واحدهای پیکسل (PX)، ریشه ام (REM) و ام (EM). برای مشاهده مقادیر معادل در سایر واحدها، مقداری را در هر فیلد وارد کنید.

px
px
px
rem
em
تصویرسازی برای مقادیر منفی یا صفر در دسترس نیست

فرمول‌های تبدیل

  • PX به REM: مقدار در پیکسل ÷ اندازه فونت ریشه
  • PX به EM: مقدار در پیکسل ÷ اندازه فونت المان والد
  • REM به PX: مقدار در ریشه ام × اندازه فونت ریشه
  • EM به PX: مقدار در ام × اندازه فونت المان والد
ماشین حساب بارگذاری...
📚

مستندات

مبدل واحدهای PX، REM و EM: توضیح واحدهای اساسی CSS

چرا تبدیل واحدهای CSS برای توسعه وب مدرن مهم است

هنگام ساخت وب‌سایت‌های واکنش‌گرا، یکی از رایج‌ترین چالش‌ها، ترجمه مشخصات طراحی به CSS انعطاف‌پذیر و مقیاس‌پذیر است. احتمالاً در طراحی Figma با "padding: 24px" مواجه شده‌اید و فکر کرده‌اید که آیا باید آن را به همین صورت پیکسل نگه دارید یا به واحد rem تبدیل کنید. این تصمیم بر همه چیز از دسترس‌پذیری تا نحوه پاسخگویی طرح‌بندی شما هنگامی که کاربران اندازه فونت مرورگر خود را تنظیم می‌کنند، تأثیر می‌گذارد.

این تبدیل‌کننده واحدهای PX، REM و EM به شما کمک می‌کند تا سریعاً بین این سه واحد اساسی CSS جابجا شوید. پیکسل‌ها کنترل دقیق را فراهم می‌کنند - عالی برای حاشیه‌ها و جزئیات ظریف. واحدهای REM با اندازه فونت ریشه مقیاس می‌شوند، که آنها را برای فاصله‌گذاری و تایپوگرافی یکنواخت در سراسر سایت ایده‌آل می‌کند. واحدهای EM نسبت به عنصر والد خود مقیاس می‌شوند، که برای ایجاد اجزای خودمختار با حفظ تناسبات، عالی هستند.

نکته پیچیده؟ تبدیل بین آنها نیاز به در نظر گرفتن اندازه‌های فونت دارد، که بین عنصر ریشه و اجزای مختلف متفاوت است. اشتباه رایجی که من در میان توسعه‌دهندگان می‌بینم، استفاده از پیکسل در همه جا است زیرا ساده‌تر به نظر می‌رسد. اگرچه این در ابتدا کار می‌کند، اما مشکلات دسترس‌پذیری ایجاد می‌کند زمانی که کاربران اندازه پیش‌فرض فونت مرورگر خود را افزایش می‌دهند - طرح‌بندی به طور متناسب تطبیق پیدا نمی‌کند.

درک واحدهای CSS: پیکسل، REM و EM

پیکسل‌ها (PX) چیستند؟

پیکسل‌ها (PX) ساده‌ترین واحد CSS هستند—آنچه مشخص می‌کنید همان است که دریافت می‌کنید. یک پیکسل CSS یک واحد مرجع است، لزوماً یک پیکسل فیزیکی صفحه نمایش نیست (به‌ویژه در نمایشگرهای با وضوح بالا مانند صفحات Retina). آنها اندازه‌گذاری ثابتی را ارائه می‌دهند که بر اساس اندازه فونت یا عناصر والد تغییر نمی‌کند.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

زمانی که پیکسل‌ها خوب کار می‌کنند:

  • حاشیه‌ها و تقسیم‌کننده‌ها (حاشیه‌های 1 یا 2 پیکسل واضح می‌مانند)
  • جزئیات کوچک و دقیق که نباید مقیاس شوند
  • کانتینرهای با عرض ثابت زمانی که به ابعاد دقیق نیاز دارید
  • اندازه آیکن‌ها هنگام کار با اسپرایت شیت‌های دقیق پیکسلی

نکته مهم: پیکسل‌ها تنظیمات کاربر را رعایت نمی‌کنند. اگر کسی اندازه پیش‌فرض فونت مرورگر خود را از 16 پیکسل به 20 پیکسل برای خوانایی بهتر افزایش دهد، طرح‌بندی‌های مبتنی بر پیکسل تغییر نمی‌کنند و ممکن است باعث سرریز متن در کانتینرها یا ایجاد فضای فشرده شوند.

واحدهای REM چیستند؟

واحدهای REM (ریشه em) بر اساس اندازه فونت عنصر ریشه—معمولاً عنصر <html>—مقیاس‌بندی می‌شوند. اکثر مرورگرها به طور پیش‌فرض 16 پیکسل دارند، بنابراین 1rem برابر با 16 پیکسل است مگر اینکه اندازه فونت ریشه را تغییر دهید. این چیزی است که REM را قدرتمند می‌کند: آنها مقیاس‌بندی یکنواخت و قابل پیش‌بینی در سراسر سایت شما را فراهم می‌کنند.

1html {
2  font-size: 16px; /* پیش‌فرض در اکثر مرورگرها */
3}
4
5.element {
6  width: 12.5rem; /* معادل 200 پیکسل با اندازه فونت ریشه پیش‌فرض */
7  font-size: 1rem; /* معادل 16 پیکسل */
8  margin: 0.625rem; /* معادل 10 پیکسل */
9}
10

چرا توسعه‌دهندگان واحدهای REM را ترجیح می‌دهند:

  • مقیاس‌بندی یکنواخت: با تغییر اندازه فونت ریشه، همه چیز به طور متناسب مقیاس می‌شود
  • سازگاری با دسترسی‌پذیری: زمانی که کاربران اندازه فونت مرورگر خود را تنظیم می‌کنند، طرح‌بندی‌های مبتنی بر REM به طور خودکار تطبیق می‌یابند
  • نگهداری آسان‌تر: به‌روزرسانی مقادیر فاصله‌گذاری در یک مکان به جای جستجو در مقادیر پیکسلی
  • بدون مشکلات تجمعی: برخلاف واحدهای EM، REM‌ها در هنگام تودرتو شدن عناصر تجمیع نمی‌شوند

نکته حرفه‌ای از تجربه: اندازه فونت ریشه را روی 62.5% تنظیم کنید (که 1rem را برابر با 10 پیکسل با پایه 16 پیکسل پیش‌فرض می‌کند). این محاسبات ذهنی را آسان‌تر می‌کند—1.6rem = 16 پیکسل، 2.4rem = 24 پیکسل. فقط به یاد داشته باشید که اندازه فونت بدن را دوباره روی 1.6rem تنظیم کنید تا متن به طور پیش‌فرض 16 پیکسل باشد. طبق مشخصات واحدهای مقدار CSS W3C، واحدهای REM همیشه به عنصر ریشه مراجعه می‌کنند، که آنها را در طرح‌بندی‌های پیچیده قابل پیش‌بینی می‌کند.

واحدهای EM چیستند؟

واحدهای EM بر اساس اندازه فونت عنصر والد مقیاس می‌شوند، که آنها را نسبت به متن آگاه می‌کند. این رفتار با واحدهای REM که همیشه به عنصر ریشه مراجعه می‌کنند، متفاوت است. نام "em" از تایپوگرافی می‌آید—تاریخاً به عرض حرف بزرگ "M" در یک فونت خاص اشاره داشته است.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* معادل 16 پیکسل (20 پیکسل × 0.8) */
7  margin: 0.5em; /* معادل 8 پیکسل (16 پیکسل × 0.5) */
8}
9

زمانی که واحدهای EM درخشان می‌شوند:

  • طراحی مبتنی بر کامپوننت: پدینگ و حاشیه‌هایی که با اندازه فونت مقیاس می‌شوند
  • تایپوگرافی: ارتفاع خط با مقادیر بدون واحد یا ام‌ها خوب کار می‌کند (مانند line-height: 1.5em)
  • ماژول‌های خودمختار: دکمه‌ها یا کارت‌هایی که نسبت‌ها را هنگام تغییر اندازه فونت حفظ می‌کنند
  • رسانه‌های پرسش‌گر: طبق اسناد MDN Web، واحدهای EM در رسانه‌های پرسش‌گر به اندازه فونت پیش‌فرض مرورگر مراجعه می‌کنند، نه عنصر والد

دام تجمعی: اینجا جایی است که توسعه‌دهندگان اغلب گیر می‌کنند. واحدهای EM از طریق عناصر تودرتو تکرار می‌شوند، که می‌تواند نتایج غیرمنتظره‌ای ایجاد کند:

1.level-1 { font-size: 1.2em; }  /* 19.2 پیکسل اگر والد 16 پیکسل باشد */
2.level-2 { font-size: 1.2em; }  /* 23.04 پیکسل (19.2 پیکسل × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65 پیکسل (23.04 پیکسل × 1.2) */
4

پس از سه سطح تودرتو، متن شما به جای 20% مورد نظر، 73% رشد کرده است. این دلیلی است که بسیاری از توسعه‌دهندگان به محض بهبود پشتیبانی مرورگر به واحدهای REM برای تایپوگرافی روی آوردند.

فرمول‌های تبدیل و محاسبات

درک روابط ریاضی بین واحدهای PX، REM و EM برای تبدیلات دقیق بسیار مهم است. در اینجا فرمول‌های مورد استفاده در مبدل ما آمده است:

تبدیل PX به REM

برای تبدیل پیکسل به واحدهای REM، مقدار پیکسل را بر اندازه فونت ریشه تقسیم کنید:

REM=PXrootFontSizeREM = \frac{PX}{rootFontSize}

برای مثال، با اندازه فونت ریشه پیش‌فرض 16 پیکسل:

  • 16 پیکسل = 1 رم
  • 24 پیکسل = 1.5 رم
  • 8 پیکسل = 0.5 رم

تبدیل PX به EM

برای تبدیل پیکسل به واحدهای EM، مقدار پیکسل را بر اندازه فونت المان والد تقسیم کنید:

EM=PXparentFontSizeEM = \frac{PX}{parentFontSize}

برای مثال، با اندازه فونت والد 16 پیکسل:

  • 16 پیکسل = 1 ام
  • 24 پیکسل = 1.5 ام
  • 8 پیکسل = 0.5 ام

تبدیل REM به PX

برای تبدیل واحدهای REM به پیکسل، مقدار REM را در اندازه فونت ریشه ضرب کنید:

PX=REM×rootFontSizePX = REM \times rootFontSize

برای مثال، با اندازه فونت ریشه پیش‌فرض 16 پیکسل:

  • 1 رم = 16 پیکسل
  • 1.5 رم = 24 پیکسل
  • 0.5 رم = 8 پیکسل

تبدیل EM به PX

برای تبدیل واحدهای EM به پیکسل، مقدار EM را در اندازه فونت المان والد ضرب کنید:

PX=EM×parentFontSizePX = EM \times parentFontSize

برای مثال، با اندازه فونت والد 16 پیکسل:

  • 1 ام = 16 پیکسل
  • 1.5 ام = 24 پیکسل
  • 0.5 ام = 8 پیکسل

تبدیل REM به EM

برای تبدیل واحدهای REM به واحدهای EM، باید هم اندازه فونت ریشه و هم اندازه فونت المان والد را در نظر بگیرید:

EM=REM×rootFontSizeparentFontSizeEM = REM \times \frac{rootFontSize}{parentFontSize}

اگر هر دو اندازه فونت ریشه و والد یکسان باشند (مثلاً 16 پیکسل)، در این صورت 1 رم = 1 ام.

تبدیل EM به REM

برای تبدیل واحدهای EM به واحدهای REM، از فرمول زیر استفاده کنید:

REM=EM×parentFontSizerootFontSizeREM = EM \times \frac{parentFontSize}{rootFontSize}

باز هم، اگر هر دو اندازه فونت یکسان باشند، در این صورت 1 ام = 1 رم.

چگونه از مبدل واحد PX به REM به EM استفاده کنیم

دریافت تبدیلات دقیق با این ابزار بسیار ساده است. کلید اصلی، درک اندازه فونت‌هایی است که برای موقعیت خاص خود استفاده می‌کنید.

راهنمای سریع

  1. مقدار خود را وارد کنید در هر فیلد - پیکسل، REM یا EM
  2. نتایج را بلافاصله بررسی کنید در دو واحد دیگر
  3. اندازه فونت‌ها را تنظیم کنید برای تطبیق با پروژه خود:
    • اندازه فونت ریشه: آنچه روی عنصر <html> تنظیم کرده‌اید (معمولاً 16 پیکسل)
    • اندازه فونت والد: اندازه فونت والد عنصر خاص (نیز معمولاً 16 پیکسل)
  4. مقدار مورد نیاز را کپی کنید با استفاده از دکمه کپی

دریافت نتایج دقیق برای پروژه شما

مبدل به طور پیش‌فرض 16 پیکسل را برای هر دو اندازه فونت ریشه و والد استفاده می‌کند زیرا این استاندارد مرورگر است. اما نکته مهم این است: پروژه شما ممکن است مقادیر متفاوتی داشته باشد.

یافتن اندازه فونت ریشه: ابزارهای توسعه‌دهنده مرورگر خود را باز کنید، عنصر <html> را بررسی کنید و اندازه فونت محاسبه شده را چک کنید. اگر html { font-size: 62.5%; } تنظیم کرده‌اید، اندازه فونت ریشه 10 پیکسل است (62.5٪ از 16 پیکسل).

یافتن اندازه فونت والد: برای تبدیل‌های EM، به اندازه فونت عنصر والد خاصی که استایل را اعمال می‌کنید نیاز دارید. آن عنصر را در ابزارهای توسعه بررسی کنید تا اندازه فونت محاسبه شده را ببینید. اگر والد font-size: 1.2rem داشته باشد و ریشه شما 16 پیکسل باشد، اندازه فونت والد را روی 19.2 پیکسل برای محاسبات دقیق EM تنظیم کنید.

سناریوهای تبدیل رایج

از طراحی تا کد: فایل Figma شما نشان می‌دهد padding: 24px. می‌خواهید از واحدهای REM برای دسترسی‌پذیری بهتر استفاده کنید. 24 را در فیلد PX وارد کنید و خواهید دید که معادل 1.5rem است (با فرض ریشه 16 پیکسل).

ساخت کامپوننت دکمه: می‌خواهید padding با اندازه فونت دکمه مقیاس شود. اگر دکمه font-size: 1.125rem (18 پیکسل) دارد، اندازه فونت والد را روی 18 تنظیم کنید، padding مورد نظر خود را وارد کنید و از مقدار EM حاصل استفاده کنید.

تایپوگرافی واکنش‌گرا: در حال ایجاد عنوان 32 پیکسلی در دسکتاپ هستید. 32 پیکسل را وارد کنید تا ببینید 2rem است که به طور مناسب با تغییر اندازه فونت توسط کاربران مقیاس خواهد شد.

تبدیل واحدهای CSS در کاربردهای دنیای واقعی

دانستن فرمول‌ها یک چیز است - اما کاربرد موثر آنها در کد تولیدی چیز دیگری. در اینجا تبدیل واحدها تفاوت محسوسی در پروژه‌های شما ایجاد می‌کند.

تبدیل فایل‌های طراحی به CSS پاسخگو

شما یک طراحی Figma دریافت می‌کنید که همه چیز با پیکسل مشخص شده است. کامپوننت کارت نشان می‌دهد:

  • پدینگ: 24 پیکسل
  • اندازه فونت عنوان: 28 پیکسل
  • اندازه فونت متن: 16 پیکسل
  • حاشیه پایین: 40 پیکسل

تبدیل این‌ها به واحدهای REM (با فرض ریشه 16 پیکسل):

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

مزیت چیست؟ زمانی که کاربری با نقص بینایی اندازه پیش‌فرض مرورگر خود را از 16 پیکسل به 20 پیکسل افزایش می‌دهد، کارت شما متناسب مقیاس می‌شود. پدینگ، حاشیه‌ها و متن همه 25% رشد می‌کنند و توازن بصری را حفظ می‌کنند. با مقادیر پیکسل، فقط متن رشد می‌کرد و چیدمان را می‌شکست.

ساخت کتابخانه‌های کامپوننت در دسترس

کتابخانه‌های کامپوننت نیاز به دکمه‌هایی دارند که در هر اندازه‌ای - کوچک، متوسط، بزرگ - کار کنند. استفاده از واحدهای EM برای پدینگ مقیاس‌بندی خودکار ایجاد می‌کند:

1.button {
2  /* دکمه پایه در اندازه فونت 16 پیکسل */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* 12px 24px در اندازه پایه */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* پدینگ خودکار به 15px 30px تبدیل می‌شود (0.75em × 20px) */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* پدینگ خودکار به 10.5px 21px تبدیل می‌شود (0.75em × 14px) */
17}
18

(ترجمه ادامه دارد...)

تکامل واحدهای CSS: از ثابت تا انعطاف‌پذیر

گذار از پیکسل به واحدهای نسبی، مسیر وب از اسناد استاتیک تا اپلیکیشن‌های واکنش‌گرا را منعکس می‌کند. درک این تاریخ توضیح می‌دهد که چرا امروزه بین واحدها تبدیل می‌شویم.

عصر پیکسل‌های دقیق (دهه ۱۹۹۰ تا ۲۰۰۰)

وب‌سایت‌های اولیه برای عرض‌های صفحه نمایش خاصی طراحی می‌شدند - ۶۴۰ پیکسل، سپس ۸۰۰ پیکسل، سپس ۱۰۲۴ پیکسل. چیدمان‌های CSS منحصراً از پیکسل استفاده می‌کردند زیرا طراحان چاپی آن را می‌فهمیدند. سایت‌ها در تمام مرورگرها یکسان به نظر می‌رسیدند (وقتی کار می‌کردند)، اما در اندازه‌های صفحه نمایش غیرمنتظره کاملاً خراب می‌شدند. وب مانند چاپ رفتار می‌شد: ثابت، کنترل‌شده، پیش‌بینی‌پذیر.

واحدهای EM در مشخصات CSS وجود داشتند، به ارث رسیده از تایپوگرافی، اما اکثر توسعه‌دهندگان از آنها اجتناب می‌کردند. رفتار تجمعی آنها گیج‌کننده بود و دستگاه‌های موبایلی وجود نداشتند که ما را به تفکر انعطاف‌پذیر وادار کنند.

زنگ بیداری موبایل (۲۰۰۷-۲۰۱۰)

آیفون همه چیز را تغییر داد. ناگهان، بخش قابل توجهی از ترافیک از صفحه‌نمایش‌های ۳۲۰ پیکسلی می‌آمد. بزرگ‌نمایی با انگشت کمک کرد، اما وب‌سایت‌های طراحی‌شده برای دسکتاپ‌های ۱۰۲۴ پیکسلی در موبایل دردناک بودند.

مقاله اتان مارکوت در سال ۲۰۱۰ درباره طراحی وب واکنش‌گرا رویکرد جدیدی را بلورین کرد: شبکه‌های سیال، تصاویر انعطاف‌پذیر و کوئری‌های رسانه. واحدهای نسبی ضروری، نه اختیاری شدند. اما رفتار تجمعی واحدهای EM در چیدمان‌های پیچیده باعث باگ می‌شد.

واحدهای REM نجات‌دهنده (۲۰۱۰ تا کنون)

CSS3 حدود سال ۲۰۱۰ واحد REM را معرفی کرد، بزرگ‌ترین مشکل EM را حل کرد: تجمع. REM مقیاس‌بندی نسبی را بدون پیچیدگی ارث‌بری فراهم کرد. اینترنت اکسپلورر ۹ در سال ۲۰۱۱ از آن پشتیبانی کرد و تا سال ۲۰۱۵، واحدهای REM متداول شدند.

امروزه، بهترین شیوه‌ها واحدها را به طور استراتژیک ترکیب می‌کنند. REM برای تایپوگرافی و فاصله‌گذاری. EM برای نسبت‌های داخلی کامپوننت. پیکسل برای جزئیات دقیق. توابع مدرن CSS مانند clamp() این واحدها را به طور پویا ترکیب می‌کنند و چیدمان‌هایی ایجاد می‌کنند که در هر زمینه‌ای سازگار می‌شوند.

این تکامل - از پیکسل‌های صلب تا واحدهای نسبی انعطاف‌پذیر - انعکاس‌دهنده انتظارات کاربر از "وب‌سایت‌ها باید همه جا یکسان به نظر برسند" به "وب‌سایت‌ها باید همه جا به خوبی کار کنند" است.

مثال‌های کد برای تبدیل واحد

توابع تبدیل واحد در جاوااسکریپت

1// تبدیل بین واحدهای PX، REM و EM
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// مثال استفاده
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

ویژگی‌های سفارشی CSS برای تبدیل واحد

1:root {
2  /* اندازه‌های فونت پایه */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* مقادیر پیکسل رایج تبدیل شده به REM */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* مقیاس تایپوگرافی */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* مثال استفاده */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

میکسین‌های SCSS برای تبدیل واحد

1// توابع SCSS برای تبدیل واحد
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// مثال استفاده
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // استفاده از اندازه فونت والد (18px) برای تبدیل em
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

تبدیل کننده واحد در پایتون

1def px_to_rem(px, root_font_size=16):
2    """تبدیل پیکسل به واحد REM"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """تبدیل واحد REM به پیکسل"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """تبدیل پیکسل به واحد EM"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """تبدیل واحد EM به پیکسل"""
15    return em * parent_font_size
16
17# مثال استفاده
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

اشتباهات رایج در تبدیل واحدهای CSS

پس از بررسی صدها پایگاه کد، این اشتباهات را به طور مکرر مشاهده کرده‌ام. اجتناب از آنها زمان اشکال‌زدایی شما را کاهش خواهد داد.

اشتباه ۱: عدم توجه به اندازه فونت ریشه سفارشی

مشکل: ۲۴ پیکسل را به ۱.۵ رِم تبدیل می‌کنید با فرض اندازه فونت ریشه پیش‌فرض ۱۶ پیکسل، اما پروژه شما از html { font-size: 62.5%; } استفاده می‌کند که ریشه را ۱۰ پیکسل می‌کند. عنصر شما در نهایت ۱۵ پیکسل به جای ۲۴ پیکسل می‌شود.

راه حل: همیشه قبل از تبدیل، اندازه فونت ریشه واقعی پروژه خود را بررسی کنید. اندازه فونت ریشه تبدیل‌کننده را با واقعیت پروژه خود تطبیق دهید.

اشتباه ۲: استفاده از واحدهای ام برای تایپوگرافی در کامپوننت‌های تودرتو

مشکل: یک کامپوننت کارت با font-size: 1.2em برای عناوین می‌سازید. عالی کار می‌کند. سپس یک کارت را درون کارت دیگری قرار می‌دهید و ناگهان عنوان کارت داخلی ۱.۴۴ام (۱.۲ × ۱.۲) می‌شود، نه ۱.۲ام.

راه حل: برای تایپوگرافی از واحدهای رِم استفاده کنید مگر اینکه رفتار آبشاری خاصی را بخواهید. واحدهای ام را برای فاصله‌گذاری که باید با اندازه فونت محلی مقیاس شود، نگه دارید.

اشتباه ۳: تبدیل عرض حاشیه به رِم

مشکل: border: 1px را به border: 0.0625rem برای یکنواختی تبدیل می‌کنید. وقتی کاربران بزرگنمایی می‌کنند یا اندازه فونت را تغییر می‌دهند، حاشیه‌های شما ضخیم و زشت می‌شوند.

راه حل: حاشیه‌ها را در پیکسل نگه دارید. حاشیه‌های زیر پیکسل (۰.۵ پیکسل) پشتیبانی ناسازگاری در مرورگرها دارند و حاشیه‌ها به ندرت نیاز به مقیاس‌بندی با متن دارند.

اشتباه ۴: فراموش کردن اینکه واحدهای پرس‌وجوی رسانه به ترجیحات کاربر مرجع هستند

مشکل: برای نقطه شکست تبلت، @media (min-width: 768px) می‌نویسید. کاربرانی که اندازه فونت پیش‌فرض بزرگتری تنظیم کرده‌اند، چیدمان تبلت را دریافت نمی‌کنند.

راه حل: در پرس‌وجوهای رسانه از واحدهای ام یا رِم استفاده کنید: @media (min-width: 48em). این ترجیحات فونت کاربر را رعایت می‌کند، همانطور که در مستندات طراحی واکنش‌گرای MDN توصیه شده است.

اشتباه ۵: مخلوط کردن روش‌های محاسبه

مشکل: Sass شما از یک روش محاسبه استفاده می‌کند، جاوااسکریپت شما از روش دیگری، و محاسبات ذهنی شما از روش سومی. نتایج مطابقت ندارند و باعث ناراحتی در جابجایی پیکسل می‌شوند.

راه حل: از این تبدیل‌کننده به عنوان منبع اصلی استفاده کنید. آن را نشانک‌گذاری کنید، در بازبینی‌های کد به آن مراجعه کنید و اطمینان حاصل کنید که همه اعضای تیم از همان متدولوژی تبدیل استفاده می‌کنند.

سؤالات متداول

تفاوت واحدهای REM و EM چیست؟

نقطه مرجع کاملاً متفاوت است. واحدهای REM همیشه به اندازه فونت عنصر ریشه <html> نگاه می‌کنند - صرف نظر از عمق تودرتویی عنصر، 1rem برابر با همان مقدار محاسبه شده است. واحدهای EM به اندازه فونت والد مستقیم خود نگاه می‌کنند که این یک اثر آبشاری ایجاد می‌کند.

به این صورت فکر کنید: اگر سه عنصر <div> را تودرتو کنید، هر کدام با font-size: 1.2em، متن div داخلی‌ترین بسیار بزرگتر از آنچه انتظار دارید خواهد بود زیرا هر سطح ضرب را تکرار می‌کند. با font-size: 1.2rem در هر سطح، هر سه div اندازه فونت یکسانی دارند زیرا همه به ریشه مرجع هستند.

به همین دلیل REM پس از بهبود پشتیبانی مرورگر محبوب شد - پیچیدگی ذهنی ردیابی زنجیره‌های ارث‌بری را حذف می‌کند.

بهترین واحد CSS برای طراحی وب واکنش‌گرا کدام است؟

هیچ واحدی در هر موقعیت برنده نمی‌شود. بهترین طراحی‌های واکنش‌گرا واحدها را به صورت استراتژیک ترکیب می‌کنند:

برای REM استفاده کنید: فاصله‌گذاری جهانی، مقیاس‌های تایپوگرافی، فاصله‌های کامپوننت و هر اندازه‌گیری که باید با ترجیحات فونت کاربر مقیاس شود

برای EM استفاده کنید: فاصله‌گذاری داخلی کامپوننت (پدینگ دکمه، فاصله‌های کارت)، پرس‌وجوهای رسانه (ترجیحات کاربر را رعایت می‌کنند) و عناصری که باید با متن محلی خود مقیاس شوند

برای پیکسل استفاده کنید: حاشیه‌های 1 پیکسل (واضح به نظر می‌رسند)، سایه‌های جعبه (سایه‌های ظریف به دقت نیاز دارند) و عرض‌های خط SVG

برای درصد یا واحدهای viewport استفاده کنید: عرض کانتینرها، بخش‌های تمام ارتفاع

من پایگاه‌های کد را دیده‌ام که سعی کرده‌اند از یک واحد در همه جا استفاده کنند - همیشه باعث ایجاد مشکلات نگهداری می‌شود. از هر واحد در جایی استفاده کنید که بیشترین فایده را دارد.

(ادامه ترجمه در همین سبک)

مراجع و مطالعات بیشتر

  1. "ماژول مقادیر و واحدهای CSS سطح 3." توصیه‌نامه W3C. https://www.w3.org/TR/css-values-3/

  2. مارکوت، اتان. "طراحی وب واکنش‌گرا." A List Apart، 25 مه 2010. https://alistapart.com/article/responsive-web-design/

  3. راتر، ریچارد. "عناصر سبک تایپوگرافی اعمال شده در وب." http://webtypography.net/

  4. "واحدهای CSS." اسناد وب MDN. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  5. "پیکسل‌های CSS در مقابل پیکسل‌های فیزیکی." مستندات Stack Overflow. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels

  6. کویر، کریس. "طول‌های CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/

  7. "استفاده از ویژگی‌های سفارشی CSS (متغیرها)." اسناد وب MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  8. "درک و استفاده از واحدهای rem در CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

شروع تبدیل دقیق واحدهای CSS

محاسبه دستی واحدهای CSS کسل‌کننده و مستعد خطا است. شما در حال انجام محاسبات ذهنی، تردید در محاسبات و امیدواری برای درست بودن اندازه‌های فونت هستید. این مبدل PX به REM به EM این اصطکاک را از بین می‌برد.

مقادیر پیکسلی را از فایل‌های طراحی وارد کنید، اندازه‌های فونت را برای تطبیق با پیکربندی پروژه خود تنظیم کنید و بلافاصله مقادیر دقیق REM و EM را دریافت کنید. آنها را مستقیماً در کد خود کپی کنید. چه در حال پیاده‌سازی یک سیستم طراحی جدید، بازسازی یک پایگاه کد موجود با واحدهای نسبی، یا فقط تلاش برای درک ارتباط این واحدها باشید، مبدل محاسبات ریاضی را انجام می‌دهد تا شما بتوانید بر ساخت تمرکز کنید.

برای توسعه‌دهندگانی که در حال ساخت سایت‌های سازگار با دسترسی‌پذیری هستند، این ابزار به اطمینان از مقیاس‌بندی صحیح طرح‌ها هنگامی که کاربران تنظیمات فونت خود را تغییر می‌دهند کمک می‌کند - یک الزام در سطح AA استاندارد WCAG 2.1. برای کسانی که کتابخانه‌های کامپوننت می‌سازند، مشخص می‌کند که کدام مقادیر EM تناسبات مورد نظر را ایجاد می‌کنند. برای هر کسی که طرح‌های Figma را به CSS تولید تبدیل می‌کند، گردش کار تبدیل را به طور قابل توجهی سرعت می‌بخشد.

فرمول‌ها بر اساس مشخصات ماژول مقادیر و واحدهای CSS W3C است که اطمینان می‌دهد تبدیل‌ها دقیقاً با نحوه محاسبه مرورگرها مطابقت دارند.