نحوه استفاده
- اگر سایت شما اندازه فونت ریشه را تغییر می‌دهد، آن را تنظیم کنید (برای مثال html { font-size: 62.5% } آن را 10px می‌کند).
- در هر یک از کادرها مقداری تایپ کنید تا px به rem یا rem به px تبدیل شود. اگر اندازه‌گیری نسبت به عنصر والد است، حالت را به em تغییر دهید.
- برای یافتن سریع از جدول استفاده کنید یا یک قطعه CSS جایگذاری کنید تا همه طول‌های px یکجا تبدیل و نتیجه کپی شود.
نحوه کار
rem = px ÷ اندازهٔ قلم ریشه. با ریشهٔ پیش‌فرض 16px، مقدار 24px برابر با 1.5rem و 14px برابر با 0.875rem است. em از همان فرمول استفاده می‌کند اما با اندازهٔ قلم عنصر والد؛ به همین دلیل مقدارهای تودرتوی em در هم ضرب می‌شوند. rem این مشکل را ندارد چون همیشه به ریشه اشاره می‌کند.
استفاده از rem برای اندازهٔ قلم و فاصله‌گذاری باعث می‌شود متن با تغییر اندازهٔ قلم پیش‌فرض در تنظیمات مرورگر مقیاس‌پذیر باشد و به افراد کم‌بینا کمک می‌کند. مقادیر تا چهار رقم اعشار گرد می‌شوند.
مبدل قطعه‌کد اعداد همراه با px را تغییر می‌دهد. توضیح‌ها، url(…) و رشته‌های داخل گیومه را دست‌نخورده باقی می‌گذارد، در صورت درخواست شما مقدار 1px را حفظ می‌کند (حاشیه‌های نازک معمولاً باید 1px بمانند)، مقدار 0px را به‌صورت 0 می‌نویسد و به‌طور پیش‌فرض شرط‌های @media و @container را تغییر نمی‌دهد؛ زیرا در media queryها، rem و em همیشه به اندازهٔ قلم اولیهٔ مرورگر اشاره می‌کنند، مستقل از اندازهٔ قلم ریشه‌ای که شما تنظیم کرده‌اید. این ابزار معنی calc() را فراتر از جایگزینی اعداد px داخل آن درک نمی‌کند، اما این کار همچنان درست است چون هر طول به‌تنهایی تبدیل می‌شود.
نمونه‌ها
اندازهٔ ریشهٔ پیش‌فرض
با ریشهٔ 16px: 12px = 0.75rem، 20px = 1.25rem، 32px = 2rem، 0.5rem = 8px.
ترفند 62.5%
اگر CSS شما html { font-size: 62.5% } را تنظیم کرده باشد، ریشه 10px است؛ بنابراین 14px = 1.4rem و 24px = 2.4rem می‌شود. برای هماهنگی، فیلد اندازهٔ قلم ریشه را روی 10 بگذارید.
تبدیل یک کامپوننت
padding: 24px 16px; border: 1px solid #ddd; با فعال بودن «حفظ مقادیر 1px» به padding: 1.5rem 1rem; border: 1px solid #ddd; تبدیل می‌شود.
پرسش‌های متداول
آیا باید از rem استفاده کنم یا em؟
برای بیشتر اندازه‌های قلم، فاصله‌گذاری و چیدمان از rem استفاده کنید، چون در همه‌جا قابل پیش‌بینی است. زمانی از em استفاده کنید که چیزی باید با اندازهٔ متن کامپوننت خودش مقیاس شود، مانند padding داخلی یک دکمه.
چرا media queryها را به rem تبدیل نکنیم؟
می‌توانید، اما در media query مقدار 1rem همیشه برابر با اندازهٔ قلم پیش‌فرض مرورگر است (معمولاً 16px)، نه font-size موجود در html شما. به همین دلیل مبدل به‌طور پیش‌فرض از آن‌ها صرف‌نظر می‌کند؛ اگر در هر صورت تقسیم بر 16 را می‌خواهید، گزینهٔ مربوط را خاموش کنید.
آیا rem از نظر دسترس‌پذیری بهتر از px است؟
برای اندازهٔ قلم، بله: rem به تنظیم اندازهٔ قلم پیش‌فرض کاربر احترام می‌گذارد، در حالی که اندازهٔ قلم‌های px آن را نادیده می‌گیرند. بزرگ‌نمایی مرورگر با هر دو واحد کار می‌کند.
حریم خصوصی
تبدیل‌ها و قطعه CSS در مرورگر شما پردازش می‌شوند و هرگز به جایی ارسال نمی‌شوند.