تبدیل rem به px Root em ↔ Pixels رایگان آنلاین امن

چرا باید rem را به px تبدیل کنید

یک فایل استایل را باز می‌کنید و روی یک کارت padding: 2.25rem و روی یک زیرنویس font-size: 0.8125rem می‌بینید. مقادیر خوبی هستند، به همان شیوه‌ای نوشته شده‌اند که CSS مدرن باید نوشته شود، و در یک نگاه چیزی به شما نمی‌گویند. این فاصلهٔ داخلی کارت روی صفحه چقدر بزرگ است؟ آیا زیرنویس خوانا خواهد بود؟ آیا با 36 px و 13 px در فایل طراحی‌ای که به شما داده‌اند می‌خواند؟ برای پاسخ، rem را به px تبدیل می‌کنید: در اندازهٔ قلم ریشه ضرب می‌کنید و پاسخ را در یکایی می‌خوانید که ابزارهای طراحی به کار می‌برند. این جهت معکوس مسیر معمول است و همان کاری است که وقتی کد می‌خوانید، یک ماکت را با نسخهٔ ساخته‌شده مقایسه می‌کنید یا یک چیدمان را برای کسی که با پیکسل فکر می‌کند توضیح می‌دهید انجام می‌دهید.

تبدیل ساده است؛ آنچه آن را شایستهٔ یک صفحه می‌کند مبنا است. rem یک اندازه نیست، مضربی از یک اندازه است، یعنی اندازهٔ قلم عنصر ریشه. در مرورگری که کسی چیز دیگری به آن نگفته این اندازه 16 px است، پس 1 rem برابر 16 px است، 2.25 rem برابر 36 px و 0.8125 rem برابر 13 px. اما ریشه را می‌توان با فایل استایل تغییر داد و خواننده نیز می‌تواند آن را در مرورگر تغییر دهد، و آن‌وقت هر مقدار rem در صفحه با آن جابه‌جا می‌شود. بنابراین این صفحه مبنا را می‌پرسد و از آن استفاده می‌کند، به‌جای اینکه پنهانش کند.

محاسبه در مرورگر شما انجام می‌شود و چیزی بارگذاری نمی‌شود. در ادامه فرمول، جدول مقادیر رایج، آنچه تبدیل حفظ می‌کند و آنچه نمی‌تواند، موقعیت‌هایی که توسعه‌دهندگان باید rem را به px تبدیل کنند و چند عادت را می‌یابید که خواندن یک فایل استایل مبتنی بر rem را آسان نگه می‌دارند.

فرمول و مبنا

px برابر است با rem ضرب در مبنا

فرمول یک ضرب است: px = rem × base. با مبنای معمول 16 px، مقدار 1.5 rem می‌شود 24 px، 0.75 rem می‌شود 12 px و 4 rem می‌شود 64 px. صفحه مبنا را کنار نتیجه چاپ می‌کند، پس سطری مثل 1.5 rem = 24 px (16 px) می‌گوید چه فرض کرده و می‌توانید فوراً ببینید با پروژهٔ شما می‌خواند یا نه.

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

در فایل استایل دنبال قاعده‌ای روی html یا :root بگردید که font-size را تعیین کند. اگر نیست، مبنا پیش‌فرض مرورگر یعنی 16 px است. اگر هست، مثلاً 62.5%، همان درصد را از 16 بگیرید: 62.5% می‌شود 10 px. در ابزارهای توسعه‌دهندهٔ مرورگر هم می‌توانید عنصر ریشه را انتخاب کنید و اندازهٔ قلم محاسبه‌شدهٔ آن را بخوانید که عددی است که باید در کادر مبنا وارد کنید.

وقتی اندازهٔ ریشه سیال است

بعضی وب‌سایت‌ها با یک عبارت clamp اندازهٔ ریشه را همراه با پنجره بزرگ می‌کنند. آن‌وقت 1 rem اصلاً یک مقدار پیکسلی واحد ندارد: روی تلفن 15 px است و روی نمایشگر عریض 18 px. در این حالت هر تبدیل یک عکس لحظه‌ای است. مبنایی را که در عرض مورد نظرتان می‌بینید وارد کنید و بدانید پاسخ فقط در همان عرض معتبر است.

آنچه تبدیل حفظ می‌کند و آنچه نمی‌تواند

نسبت را حفظ می‌کند

یک rem هر چیزی است که اندازهٔ قلم ریشه باشد، پس چیدمانی که با rem نوشته شده با تغییر آن اندازه شکل خود را حفظ می‌کند. وقتی rem را به px تبدیل می‌کنید، مقدار پیکسلی همان نسبت است که برای یک مبنای مشخص عینی شده. نسبت میان دو اندازه، مثلاً عنوانی با 2 rem بالای متن اصلی با 1 rem، هر طور که تبدیل کنید تغییر نمی‌کند، و این نسبت چیزی است که یک چیدمان خوب به آن وابسته است.

تنظیمات خواننده را نمی‌داند

عدد کاملاً به مبنا وابسته است. اگر خواننده اندازهٔ پیش‌فرض متن مرورگرش را بالا برده باشد، که بسیاری از مردم می‌کنند و حق دارند، آن‌وقت 1 rem برای او 16 px نیست و رقمی که می‌بینید فقط برای مبنای موجود در کادر درست است. مقدار پیکسلی را راهی برای فهمیدن طراحی بدانید، نه تضمینی برای آنچه هر بازدیدکننده خواهد دید.

گردکردن

چون مبنا معمولاً عدد صحیح است، نتیجهٔ ضرب معمولاً دقیق است. 0.8125 rem در مبنای 16 دقیقاً 13 px است؛ 0.6875 rem دقیقاً 11 px است. اگر اعشار بلندی گرفتید، نشانهٔ آن است که مقدار rem از مبنایی متفاوت از آنچه وارد کرده‌اید محاسبه شده است.

مقادیر رایج

جدول پایین صفحه

صفحه جدولی از مقادیر پیکسلی دارد که رقم‌های رایج rem در مبنایی که تعیین کرده‌اید با آن‌ها متناظرند: 0.5 rem برابر 8 px است، 0.625 برابر 10، 0.75 برابر 12، 0.875 برابر 14، 1 برابر 16، 1.125 برابر 18، 1.25 برابر 20، 1.5 برابر 24، 2 برابر 32، 3 برابر 48 و 4 برابر 64. این‌ها مقادیری هستند که بیشتر در فاصله‌گذاری و مقیاس‌های تایپوگرافی پیش می‌آیند و حفظ بودنشان خواندن یک فایل استایل را در یک نگاه ممکن می‌کند.

خواندن یک فایل استایل با پیکسل

تمرینی مفید این است که فایل استایلی را که خودتان ننوشته‌اید بردارید و مقادیر اصلی آن را یک بار به پیکسل ترجمه کنید و نتیجه را در یادداشتی بنویسید. اندازهٔ متن اصلی 1 rem، عنوان‌ها 1.5 و 2.25 rem، فاصلهٔ ظرف 2 rem: به پیکسل، 16، 24، 36 و 32. از این دید، منطق طراحی نمایان می‌شود و می‌توانید بدون ماشین‌حساب آن را با فایل طراحی مقایسه کنید.

چگونه اینجا rem را به px تبدیل کنیم

مقدار rem را وارد کنید

اندازه را بر حسب rem در کادر اول وارد کنید. اعشار پذیرفته می‌شود، پس 0.8125 هم مثل 1 کار می‌کند.

مبنا را تعیین کنید

اگر CSS شما اندازهٔ ریشه را تغییر نمی‌دهد آن را روی 16 بگذارید. اگر تغییر می‌دهد، آن را عوض کنید. نتیجه همزمان با تایپ شما به‌روز می‌شود.

مقدار پیکسلی را بخوانید

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

این یکاها از کجا آمده‌اند

پیکسل CSS

وقتی نمایشگرها دیگر چگالی قابل پیش‌بینی نداشتند، صفحه‌ای که با پیکسل واقعی اندازه‌گیری می‌شد با تیزتر شدن صفحه‌نمایش‌ها کوچک می‌شد. پس پیکسل CSS به عنوان یک طول مرجع بازتعریف شد: حدود 1/96 اینچ در فاصلهٔ خواندن راحت. بنابراین پیکسل در یک فایل استایل یک نقطه روی صفحه‌نمایش شما نیست، بلکه یکای طولی است که مرورگر آن را به هر تعداد نقطه که صفحه‌نمایش لازم دارد نگاشت می‌کند.

rem

em از وب قدیمی‌تر است: در حروف سربی عرض یک قطعهٔ ریخته‌گری بود که از حرف بزرگ M نام گرفت، و در CSS به معنای اندازهٔ قلم جاری است، به همین دلیل با تودرتو شدن عناصر تغییر می‌کند. rem برای گریز از همین اضافه شد: em عنصر ریشه است و هرگز انباشته نمی‌شود. برای دیدن تفاوت با عدد، px را به em تبدیل کنید و با آنچه هنگام تبدیل rem به px می‌گیرید مقایسه کنید.

چه وقت توسعه‌دهندگان rem را به px تبدیل می‌کنند

بررسی یک نسخهٔ ساخته‌شده با فایل طراحی

طراح فایلی با پیکسل تحویل می‌دهد؛ توسعه‌دهنده کد را با rem نوشته است. برای بررسی اینکه صفحه می‌خواند، rem را به px تبدیل می‌کند و عددها را مقایسه می‌کند. ناهماهنگی فوراً نمایان می‌شود: 1.375 rem برابر 22 px است و اگر طراحی 24 بگوید، یکی از آن‌ها نادرست است.

خواندن کدی ناآشنا

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

نوشتن گزارش خطا و مستندات

کسانی که یک صفحه را آزمایش می‌کنند آنچه می‌بینند با پیکسل توصیف می‌کنند. توسعه‌دهنده‌ای که بگوید فاصلهٔ داخلی 2.5 rem است برای آزمونگر چیز زیادی نمی‌گوید؛ 40 px معنا دارد. تبدیل باعث می‌شود دو طرف یکدیگر را بفهمند.

تعیین مقادیری که باید با پیکسل دقیق باشند

بعضی چیزها باید تعداد دقیقی از پیکسل‌های دستگاه باشند وگرنه مات به نظر می‌رسند: یک حاشیهٔ یک‌پیکسلی، یک آیکون که روی شبکهٔ 24 px کشیده شده. اگر اندازه‌ای باید روی شبکهٔ پیکسل بنشیند، تبدیل rem به px به شما می‌گوید در مبنای شما چنین هست یا نه.

تله‌ها هنگام تبدیل rem به px

فراموش کردن اندازهٔ ریشهٔ تغییریافته

اگر ریشه روی 62.5% یا روی یک عبارت clamp تنظیم شده باشد، ضریب استاندارد 16 صدق نمی‌کند. نتیجه به اندازهٔ نسبت دو مبنا نادرست است. همیشه ابتدا مبنا را بررسی کنید.

اشتباه گرفتن rem با em

em نسبت به اندازهٔ قلم خود عنصر است، نه ریشه. مقدار 1.5em در یک عنوان 24 px برابر 36 px است، اما در یک پاراگراف 16 px برابر 24 px است. این صفحه rem را تبدیل می‌کند که چنین ابهامی ندارد. برای em، em به px را ببینید.

فرض اینکه صفحه‌نمایش همان پیکسل‌ها را نشان می‌دهد

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

زود گرد کردن

اگر 13.333 px را به 13 گرد کنید و سپس برگردانید، 0.8125 rem می‌گیرید، نه 0.8333 که از آن شروع کردید. وقتی اهمیت دارد مقدار اصلی rem را نگه دارید.

پرسش‌هایی که مردم پیش از تبدیل می‌پرسند

1 rem چند پیکسل است؟

شانزده، در مرورگری که پیش‌فرضش تغییر نکرده باشد.

2 rem چند پیکسل است؟

سی‌ودو در مبنای پیش‌فرض. در مبنای 10 می‌شود 20.

چرا مرورگر من چیز دیگری نشان می‌دهد؟

تنظیم خواننده یا قاعده‌ای در فایل استایل اندازهٔ ریشه را تغییر داده است. اندازهٔ قلم محاسبه‌شدهٔ عنصر ریشه را در ابزارهای توسعه‌دهنده ببینید.

آیا rem همان em است؟

خیر. rem به عنصر ریشه اشاره دارد و em به خود عنصر.

آیا عدد من بارگذاری می‌شود؟

خیر. محاسبه در مرورگر شما انجام می‌شود و چیزی به جایی فرستاده نمی‌شود.

چگونه برگردم؟

با px به rem که به‌جای ضرب، تقسیم می‌کند.

عادت‌هایی که فایل استایل rem را خواندنی می‌کنند

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

سطری مثل gap: 1.5rem; /* 24px */ چند نویسه هزینه دارد و خوانندهٔ بعدی را از یک تبدیل نجات می‌دهد. همچنین مبنایی را که فرض کرده‌اید ثبت می‌کند.

از یک مقیاس کوچک استفاده کنید

پروژه‌ای که فقط مشتی مقدار rem به کار می‌برد، مثل 0.5، 1، 1.5، 2 و 3، یادگیری‌اش آسان است: پس از یک روز آن‌ها را بدون فکر به پیکسل می‌دانید. وقتی برای چنین فایل استایلی rem را به px تبدیل می‌کنید فقط آنچه را به یاد دارید تأیید می‌کنید.

به مقادیرتان نام بدهید

با ویژگی‌های سفارشی، مثل --space-md: 1.5rem، فایل استایل به جای عدد، قصد را توصیف می‌کند. نام معنا را حمل می‌کند و عدد در یک جا می‌نشیند.

با اندازهٔ پیش‌فرض متفاوت آزمایش کنید

اندازهٔ پیش‌فرض متن را در مرورگرتان بالا ببرید و به صفحه نگاه کنید. اگر یکپارچه ماند، چیدمان واقعاً با rem ساخته شده است. اگر به هم ریخت، چیزی با پیکسل مانده است.

استفادهٔ درست از مقدار پیکسلی پس از تبدیل rem به px

نسبت‌ها را مقایسه کنید، نه فقط عددها را

وقتی برای یک فایل استایل کامل rem را به px تبدیل می‌کنید، به نسبت‌های میان اندازه‌ها هم نگاه کنید، نه فقط خود اندازه‌ها. مقیاس تایپوگرافی‌ای که هر گامش حدود 1.25 برابر قبلی است 16، 20، 25، 31 و 39 پیکسل می‌دهد؛ مقیاس 1.5 می‌دهد 16، 24، 36 و 54. تشخیص نسبت به شما می‌گوید طراح چه قصدی داشته و وقتی اندازهٔ تازه‌ای لازم دارید اجازه می‌دهد مقیاس را یکدست گسترش دهید.

برای کسانی که با پیکسل فکر می‌کنند ترجمه کنید

همه در یک تیم rem نمی‌خوانند. مدیران پروژه، نویسندگان متن و مشتریان اغلب از روی تصاویر کار می‌کنند و می‌خواهند عنوانی کمی بزرگ‌تر شود. اگر بتوانید بگویید عنوان اکنون 36 px است و در 2.5 rem می‌شود 40 px، گفت‌وگو کوتاه می‌شود. این صفحه پلی سریع میان دو واژگان است.

هدف‌های لمسی و حداقل اندازه‌ها را بررسی کنید

رهنمودهای صفحه‌های لمسی هدف‌هایی دست‌کم حدود 44 px می‌خواهند و رهنمودهای متن برای متن اصلی حدود 16 px یا بیشتر. هر دو با پیکسل بیان شده‌اند. برای سنجش فایل استایلی که با rem نوشته شده، rem را به px تبدیل کنید و ببینید دکمه‌ها و متن از آن خط می‌گذرند یا نه.

به حالت بزرگ‌نمایی‌شده توجه کنید

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

مبدل‌های مرتبط

همین خانوادهٔ ابزارها تبدیل‌های همسایه را می‌پوشاند. برای بازگشت به rem از px به rem استفاده کنید. برای اندازه‌های نسبت به عنصر px به em و em به px هستند و برای اندازه‌های نسبت به صفحه‌نمایش px به vw و vw به px. برای رنگ‌های همان فایل استایل HEX به RGB و HSL به HEX در دسترس‌اند و برای نام کلاس‌ها، متن به kebab-case عبارتی را به نامی تبدیل می‌کند که CSS می‌پذیرد.

یک مثال عملی

فرض کنید یک درخواست ادغام را بررسی می‌کنید و فایل استایل بخش اصلی صفحه‌ای با padding: 5rem 1.5rem، عنوانی با 3.5rem و پاراگراف مقدمه‌ای با 1.25rem دارد. فایل طراحی می‌گوید 80 px و 24 px فاصلهٔ داخلی، عنوان 56 px و مقدمه 20 px. 5 را وارد می‌کنید و 80 px می‌خوانید، 1.5 را وارد می‌کنید و 24 می‌خوانید، 3.5 را وارد می‌کنید و 56 می‌خوانید، 1.25 را وارد می‌کنید و 20 می‌خوانید. هر چهار می‌خواند، پس نسخهٔ ساخته‌شده وفادار است. اگر عنوان 3.25 rem بود، 52 می‌خواندید و پیش از رسیدن به طراح تفاوت را می‌یافتید.

یک فهرست بررسی کوتاه

پیش از تبدیل

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

هنگام تبدیل

مقدار rem را وارد کنید، مبنای نشان‌داده‌شده کنار نتیجه را بررسی کنید و رقم پیکسلی را یادداشت کنید.

پس از تبدیل

با فایل طراحی مقایسه کنید. اگر عددها فرق دارند، پیش از شک به کد مبنا را بررسی کنید.

اشتباهات رایج

استفاده از 16 بدون بررسی

پیش‌فرض است، نه قاعده. ریشه را بررسی کنید.

نهایی دانستن پیکسل‌ها

پاسخ برای یک مبنا صادق است. خواننده‌ای با پیش‌فرض بزرگ‌تر پیکسل‌های بزرگ‌تری می‌بیند.

قاطی کردن rem و em

شبیه هم‌اند و رفتار متفاوتی دارند. برای هر کدام از صفحهٔ درست استفاده کنید.

عددهای شما روی دستگاه شما می‌مانند

محاسبه به‌صورت محلی انجام می‌شود. مقادیر شما را مرورگر خودتان به کار می‌برد و چیزی به جایی فرستاده نمی‌شود. بعداً چیزی برای حذف نیست و حسابی برای ساختن وجود ندارد. این راه ساده برای تبدیل rem به px است.

خلاصه

برای تبدیل rem به px اینجا، اندازه را بر حسب rem وارد کنید و فوراً آن را با پیکسل بخوانید، با فرمول px = rem × base. مبنا از 16 px شروع می‌شود، پیش‌فرض مرورگر، و می‌توانید آن را با CSS خود هماهنگ کنید. تبدیل نسبت را حفظ می‌کند، چون یک rem هر چیزی است که اندازهٔ قلم ریشه باشد، و تنظیمات خواننده را نمی‌داند، پس رقم فقط برای مبنای موجود در کادر درست است. جدول مقادیر رایج، از 0.5 rem با 8 px تا 4 rem با 64 px، به خواندن یک فایل استایل در یک نگاه کمک می‌کند. چیزی بارگذاری نمی‌شود.