مبدل px به rem و em

مبدل px به rem و em چه کاری انجام می‌دهد

این ابزار مقادیر پیکسل (px) را به رم (rem) و ای‌ام (em) تبدیل می‌کند، و برعکس. کافی است مقدار مورد نظرتان را در یکی از این سه واحد وارد کنید تا ابزار بلافاصله مقادیر معادل را در دو واحد دیگر محاسبه و نمایش دهد. علاوه بر این، می‌توانید یک اندازه فونت ریشه دلخواه و یک اندازه فونت زمینه em دلخواه هم تنظیم کنید تا تبدیل‌ها دقیقاً متناسب با نیازهای طراحی خودتان انجام شوند. همان‌طور که در راهنمای صفحه هم آمده: «یک مقدار بر حسب px، rem یا em وارد کنید — دو مقدار دیگر هم‌زمان با تایپ شما به‌روزرسانی می‌شوند.»

اندازه فونت ریشه چیست و چرا اهمیت دارد

فیلد «اندازه فونت ریشه (px)» عددی است که فونت پایه صفحه را بر حسب پیکسل نشان می‌دهد. چون واحد rem همیشه نسبت به همین مقدار سنجیده می‌شود، تغییر این فیلد باعث می‌شود مقادیر rem بر اساس ریشه جدید محاسبه شوند. برای نمونه، با اندازه فونت ریشه پیش‌فرض ۱۶ پیکسل، عدد ۲۴ در فیلد px معادل ۱٫۵rem است. مقدار پیش‌فرض این فیلد ۱۶ پیکسل است و باید عددی بزرگ‌تر از صفر باشد؛ ابزار همین عدد را هم به‌عنوان یکی از خروجی‌ها، یعنی اندازه فونت ریشه‌ای که تعیین کرده‌اید، نشان می‌دهد.

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

فیلد «اندازه فونت زمینه em (بر حسب px)» عددی است که فونت عنصری را نشان می‌دهد که واحد em در آن به کار می‌رود، و در محاسبه تبدیل‌های em استفاده می‌شود. برای نمونه، اگر این مقدار را روی ۲۰ پیکسل تنظیم کرده باشید، عدد ۳۰ در فیلد px معادل ۱٫۵em خواهد بود. این فیلد هم مانند اندازه فونت ریشه، مقدار پیش‌فرض ۱۶ پیکسل دارد و باید عددی بزرگ‌تر از صفر باشد. در حالت اولیه، پیش از هر تغییری در این دو فیلد، ۱۶ پیکسل برابر با ۱rem و برابر با ۱em است؛ یعنی هر سه واحد از یک نقطه شروع مشترک آغاز می‌کنند.

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

فیلد «مقادیر» عددی است که یک طول را بر حسب px، rem یا em نشان می‌دهد. وقتی هر یک از فیلدهای px، rem یا em را ویرایش می‌کنید، دو فیلد دیگر هم‌زمان با تایپ شما به‌روزرسانی می‌شوند؛ به این ترتیب همیشه سه مقدار معادل هم را جلوی چشم دارید. خروجی نهایی شامل اندازه فونت ریشه‌ای که خودتان تعیین کرده‌اید، اندازه فونت زمینه em‌ای که خودتان تعیین کرده‌اید، و مقداری است که «در هر سه واحد تبدیل شد.» ابزار مقادیر پیکسل منفی را هم می‌پذیرد؛ برای نمونه با ریشه ۱۶ پیکسلی، عدد ‎-۸ در فیلد px معادل ‎-۰٫۵rem است. این ویژگی برای مقادیری مثل فاصله‌گذاری‌های منفی هم کاربرد دارد.

پیام‌های خطا هنگام ورودی نامعتبر

اگر مقدار نامعتبری در فیلد «مقادیر» وارد کنید، پیام «یک عدد برای تبدیل وارد کنید.» نمایش داده می‌شود. اگر مقدار نامعتبری در فیلد «اندازه فونت ریشه (px)» وارد کنید، پیام «اندازه فونت ریشه باید عددی بزرگتر از ۰ باشد.» ظاهر می‌شود. و اگر مقدار نامعتبری در فیلد «اندازه فونت زمینه em (بر حسب px)» وارد کنید، پیام «اندازه فونت زمینه em باید عددی بزرگتر از ۰ باشد.» نمایش داده می‌شود. این پیام‌ها دقیقاً مشخص می‌کنند کدام فیلد نیاز به اصلاح دارد.

جدول تبدیل‌های رایج px به rem

جدول «تبدیل‌های رایج px ← rem (پایه ۱۶ پیکسل)» مجموعه‌ای از مقادیر رایج پیکسل را نشان می‌دهد که با فرض اندازه فونت ریشه ۱۶ پیکسلی به rem تبدیل شده‌اند. این جدول برای مواقعی مفید است که فقط می‌خواهید معادل rem یک عدد پیکسلِ آشنا را سریع ببینید، بدون آنکه لازم باشد آن را در فیلد «مقادیر» تایپ کنید.

چه کسانی به این ابزار نیاز دارند و حریم خصوصی داده‌ها

این مبدل برای کسی مناسب است که می‌خواهد مقادیر ثابت پیکسل را برای طراحی واکنش‌گرا به واحدهای نسبی rem یا em تبدیل کند، کسی که می‌خواهد بفهمد اندازه‌های مختلف فونت ریشه چگونه روی مقادیر rem تأثیر می‌گذارند، کسی که باید مقدار em را بر اساس اندازه فونت یک عنصر خاص محاسبه کند، و کسی که می‌خواهد وقتی خواننده اندازه فونت پیش‌فرض خودش را تغییر می‌دهد، اندازه‌بندی صفحه به‌درستی مقیاس‌پذیر بماند.

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

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

تفاوت بین px، rem و em چیست؟

واحد px یک طول ثابت است. واحد rem نسبت به اندازه فونت ریشه صفحه سنجیده می‌شود، بنابراین در ریشه ۱۶ پیکسلی، ۱rem معادل ۱۶ پیکسل است. واحد em نسبت به اندازه فونت عنصری که در آن قرار دارد سنجیده می‌شود. تعیین اندازه متن و فاصله‌ها با rem به همه چیز اجازه می‌دهد تا با تغییر اندازه فونت پیش‌فرض توسط کاربر، به طور متناسب مقیاس‌پذیر شوند.

چرا یک اندازه زمینه em مجزا وجود دارد؟

واحد em نسبت به اندازه فونت عنصر خودش سنجیده می‌شود که همیشه با ریشه یکسان نیست. اندازه زمینه em را روی اندازه فونت همان عنصر تنظیم کنید تا em به‌درستی محاسبه شود، و در صورت یکسان بودن این دو، آن را برابر با ریشه نگه دارید.

اگر اندازه فونت ریشه من ۱۶ پیکسل نباشد چه؟

فیلد اندازه فونت ریشه را متناسب با CSS خودتان تغییر دهید تا تمام مقادیر rem فوراً به‌روزرسانی شوند. جدول تبدیل‌های رایج px به rem در همین صفحه، راهنمای کاربردی برای ریشه رایج ۱۶ پیکسلی است که اکثر سایت‌ها از آن شروع می‌کنند.