مبدل واحدهای CSS
واحدهای px، rem، em، pt، %، vw و vh را یک‌جا تبدیل کنید و با پیش‌نمایش زنده، اندازه دقیق را ببینید؛ نه فقط عدد را.
اندازه‌های مرجع
پیش‌نمایش زنده
مرجع سریع (px → rem، اندازهٔ فعلی ریشه)
دربارهٔ این ابزار
این مبدل واحد CSS چه کاری انجام می‌دهد
CSS هفت روش مختلف برای تعیین اندازه عناصر در اختیار شما می‌گذارد — px، rem، em، pt، %، vw و vh — و هرکدام بسته به زمینه معنای متفاوتی دارند. این ابزار مقدار هرکدام از این واحدها را هم‌زمان به همه واحدهای دیگر تبدیل می‌کند و از اندازه فونت ریشه، اندازه فونت والد و ابعاد viewport تعیین‌شده توسط شما استفاده می‌کند؛ بنابراین اعداد واقعاً با stylesheet واقعی شما مطابقت دارند و بر اساس مقدار پیش‌فرض عمومی 16px محاسبه نمی‌شوند.
نحوه استفاده از آن
- یک مقدار وارد کنید و واحد فعلی آن را انتخاب کنید — px، rem، em، pt، %، vw یا vh.
- اگر پروژهٔ شما از اندازهٔ فونت ریشهٔ غیرپیش‌فرض استفاده می‌کند (برخی سیستم‌های طراحی برای محاسبهٔ سادهٔ rem آن را روی 62.5%، یعنی 10px، تنظیم می‌کنند)، «اندازهٔ فونت ریشه» را به‌روزرسانی کنید تا تبدیل rem با مقدار واقعی مطابقت داشته باشد.
- برای تبدیل دقیق em و %، «اندازهٔ فونت والد» را تنظیم کنید — هر دو واحد نسبت به عنصر والد هستند، نه ریشه؛ به همین دلیل تبدیل دستی مقادیر em و % می‌تواند بسیار گیج‌کننده باشد.
- عرض/ارتفاع viewport هدف را تنظیم کنید تا vw/vh را با دقت، متناسب با اندازه صفحه‌ای که واقعاً برای آن طراحی می‌کنید، تبدیل کنید.
- پیش‌نمایش زندهٔ متن را بررسی کنید تا ببینید اندازهٔ نهایی در عمل چگونه به نظر می‌رسد، و برای مقادیر رایج، بدون وارد کردن دوبارهٔ چیزی، از جدول مرجع سریع px به rem استفاده کنید.
تفاوت بین em، rem و % (بخشی که معمولاً افراد در آن اشتباه می‌کنند)
- rem همیشه نسبت به ریشه است (
<html>) اندازه فونت — بدون توجه به میزان تودرتوبودن عنصر، ثابت می‌ماند. - em نسبت به اندازه فونت عنصر والد محاسبه می‌شود؛ بنابراین مقدار یکسان em بسته به محل قرارگیری آن در DOM می‌تواند با اندازه‌های متفاوتی بر حسب پیکسل نمایش داده شود. این بزرگ‌ترین دلیل بروز خطاهای «چرا مقدار em من اشتباه نمایش داده می‌شود؟» است.
- % برای font-size نیز em به همین شکل عمل می‌کند — نسبت به اندازه فونت محاسبه‌شده عنصر والد.
- vw/vh این واحدها نسبت به viewport هستند، نه هیچ عنصر دیگری؛ به همین دلیل برای تایپوگرافی سیال مفیدند، اما برای مواردی که باید در عرض‌های بسیار کوچک یا بسیار بزرگ صفحه همچنان خوانا بمانند، می‌توانند مشکل‌ساز باشند.
موارد استفاده در دنیای واقعی
- تبدیل مشخصات طراحی Figma/Sketch: طراحان معمولاً مقادیر px را تحویل می‌دهند؛ اما توسعه‌دهندگان برای CSS دسترس‌پذیر و سازگار با بزرگ‌نمایی به rem نیاز دارند.
- رفع اشکال اندازه‌گذاری ناهماهنگ em: وقتی اندازه فونت والد را می‌دانید، دقیقاً مشخص کنید که یک em در عمل با چه مقدار پیکسلی رندر می‌شود.
- ساخت تایپوگرافی سیال: پیش از استفادهٔ قطعی از اندازهٔ فونت مبتنی بر vw، بررسی کنید که این اندازه در یک عرض مشخص viewport واقعاً به چند پیکسل نمایش داده می‌شود (یا برای تعیین حداقل/حداکثر، آن را با یک محاسبه‌گر CSS clamp() ترکیب کنید).
- شیوه‌نامه‌های چاپ: هنگام آماده‌سازی print.css، بین px و pt تبدیل کنید؛ چون pt واحد سنتی چاپ است و 1pt در 96 DPI دقیقاً برابر با 4/3 یک px است.
پرسش‌های متداول
چرا 1rem همیشه برابر با 16px نیست؟
1rem برابر است با هر مقداری که ریشه (htmlاندازهٔ فونت عنصر ) است. مرورگرها به‌صورت پیش‌فرض آن را روی 16px تنظیم می‌کنند، اما بسیاری از ریست‌های CSS یا سیستم‌های طراحی این مقدار را تغییر می‌دهند — یک الگوی رایج، تنظیم آن روی 62.5% (10px) است تا مقادیر rem به‌راحتی بر 10 تقسیم شوند.
برای font-size از px، rem یا em استفاده کنم؟
بیشتر راهنماهای دسترس‌پذیری استفاده از rem را برای اندازه فونت پیشنهاد می‌کنند، چون وقتی کاربر اندازه فونت پیش‌فرض مرورگر را تغییر می‌دهد، این واحد به‌درستی مقیاس می‌شود؛ درحالی‌که px بدون توجه به تنظیمات بزرگ‌نمایی کاربر ثابت می‌ماند. em بهتر است برای اندازه‌هایی استفاده شود که باید نسبت به والد مستقیم خود مقیاس شوند؛ مثلاً فاصله داخلی دکمه‌ای که باید همراه با اندازه فونت خود دکمه افزایش پیدا کند.
تبدیل px به pt تا چه حد دقیق است؟
این یک نسبت دقیق است: در استاندارد 96 DPI که مرورگرها فرض می‌کنند، 1pt = 4/3 px (0.75pt per px)، بنابراین 12pt بدون توجه به هیچ تنظیم دیگری، همیشه دقیقاً برابر با 16px است.
برای محاسبات vw از چه عرض منطقی برای viewport استفاده کنم؟
از breakpoint واقعی هدف خود استفاده کنید — 1920 برای یک طراحی دسکتاپ رایج، 1440 برای لپ‌تاپ، یا 375-430 برای موبایل — چون vw فقط نسبت به یک اندازهٔ مشخص viewport معنا دارد.