ابزار تبدیل PX به REM و سایر واحدهای CSS
مقادیر px، rem، em و واحدهای Viewport را سریع تبدیل کنید و Context موردنیاز برای محاسبه دقیق‌تر واحدهای نسبی را تنظیم کنید.
تبدیل زنده
مقدار و واحد مبدأ/مقصد را انتخاب کن؛ تبدیل در هر دو جهت قابل جابه‌جایی است.
Context محاسبه
واحدهای نسبی فقط با Context درست قابل تبدیل دقیق هستند.
در CSS معنی درصد به property بستگی دارد؛ مبنا را متناسب با کاربرد انتخاب کن.
جدول تبدیل
همان مقدار را هم‌زمان در تمام واحدهای قابل محاسبه ببین.
| واحد | مقدار | نوع |
|---|
ابزار تبدیل PX به REM و واحدهای CSS با Context واقعی
تبدیل px و rem ساده است، اما واحدهایی مثل em، vw و vh به Context وابسته‌اند. این ابزار Root Font Size، اندازه Parent و Viewport را در محاسبه وارد می‌کند تا تبدیل‌ها برای سناریوی واقعی پروژه قابل استفاده باشند.
برای ساخت Design System، تبدیل مقادیر Figma یا بازنویسی CSS قدیمی می‌توانید چند واحد را کنار هم مقایسه کنید و فرمول تبدیل را نیز ببینید.
راهنمای استفاده از CSS Unit Converter
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
CSS Unit Converter مقدارها را بین px، rem، em، vw، vh و واحدهای دیگر تبدیل می‌کند. بعضی تبدیل‌ها بدون Context درست معنی ندارند، بنابراین Root Font Size، Parent Font Size و Viewport بخشی از محاسبه‌اند.
قبل از شروع این موارد را بدانید
- Root Font Size واقعی پروژه را برای rem وارد کنید.
- برای em اندازه Context/Parent مهم است.
- برای vw و vh ابعاد Viewport را مطابق سناریوی موردنظر وارد کنید.
قدم‌به‌قدم با ابزار کار کنید
- ۱. مقدار و واحد مبدا را انتخاب کنیدمثلاً 16px را به‌عنوان مقدار ورودی وارد کنید.
- ۲. واحد مقصد را تعیین کنیدrem، em، vw، vh یا سایر واحدهای پشتیبانی‌شده را انتخاب کنید.
- ۳. Context را تنظیم کنیدبرای تبدیل‌های وابسته، Root Font Size یا ابعاد Viewport را مشخص کنید.
- ۴. نتیجه و جدول را بخوانیدخروجی اصلی و تبدیل هم‌زمان به واحدهای دیگر نمایش داده می‌شود.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Root Font Size
- مبنای تبدیل rem.
- Parent Font Size
- مبنای تبدیل em در سناریوهای وابسته.
- Viewport
- برای محاسبه vw و vh استفاده می‌شود.
- Swap
- واحد مبدا و مقصد را جابه‌جا می‌کند.
خروجی ابزار را چطور تفسیر کنید؟
عدد خروجی فقط با Context صحیح قابل اعتماد است. مثلاً 1rem فقط وقتی 16px است که Root Font Size واقعاً 16px باشد. جدول تبدیل‌ها برای مقایسه سریع چند واحد است.
سوالات رایج
1rem چند px است؟
به font-size عنصر ریشه بستگی دارد؛ در بسیاری از پروژه‌ها 16px است، اما می‌تواند تغییر کند.
em و rem چه فرقی دارند؟
rem به اندازه فونت Root وابسته است؛ em معمولاً به اندازه فونت Context یا عنصر والد وابسته می‌شود.
vw و vh چطور محاسبه می‌شوند؟
هر 1vw برابر یک درصد عرض Viewport و هر 1vh برابر یک درصد ارتفاع Viewport است.