تبدیل px به rem Pixels ↔ Root em رایگان آنلاین امن
مقداری را به px وارد کنید و همان لحظه معادلش را به rem ببینید. محاسبه در مرورگر شما انجام می‌شود، هیچ چیزی به جایی فرستاده نمی‌شود و آنچه تبدیل به آن بستگی دارد در ادامه نوشته شده است، نه اینکه فرض شده باشد.
بدون بارگذاری
اندازه‌های رایج — تبدیل px به rem
| px | rem |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
این واحدها از کجا آمده‌اند
پیکسل در CSS همان پیکسل صفحه‌نمایش شما نیست. وقتی نمایشگرها دیگر چگالی قابل پیش‌بینی نداشتند، صفحه‌ای که با پیکسل واقعی اندازه‌گیری شده بود با تیزتر شدن نمایشگرها کوچک می‌شد؛ بنابراین پیکسل CSS به‌صورت یک طول مرجع بازتعریف شد: حدود 1/96 اینچ، دیده‌شده از فاصلهٔ راحت خواندن. هر چیز دیگر در این صفحه بر این بنا شده است. em از وب قدیمی‌تر است — در حروف سربی عرض یک قالب ریخته‌گری بود که از حرف بزرگ M نام گرفته بود — و در CSS به معنای اندازهٔ قلم جاری است، به همین دلیل با تودرتو شدن عنصرها تغییر می‌کند. rem درست برای رهایی از همین افزوده شد: em عنصر ریشه است و هرگز انباشته نمی‌شود. vw همراه با طراحی واکنش‌گرا آمد: یک‌صدم عرض viewport، هر چه که باشد.
کجا با آنها روبه‌رو می‌شوید
این‌ها واحدهای هر شیوه‌نامه‌اند. پیکسل برای حاشیه، سایه و هر چیزی که نباید مقیاس بگیرد؛ rem برای متن، فاصله‌گذاری و چیدمان، تا یک تغییر در ریشه کل رابط را تغییر اندازه دهد؛ em برای چیزهایی که باید از متن خودشان پیروی کنند، مانند فاصلهٔ داخلی یک دکمه؛ و vw برای عنوان‌ها و بخش‌های هیرو که باید در هر دستگاهی صفحه را پر کنند. تبدیل میان آنها محاسبهٔ روزانهٔ تبدیل طرحی است که با پیکسل تحویل داده شده به شیوه‌نامه‌ای که مقیاس می‌گیرد.
پرسش‌های متداول
چرا 16 px نقطهٔ شروع معمول است؟
چون اندازهٔ پیش‌فرض متن در همهٔ مرورگرهای اصلی همین است و شیوه‌نامه‌ای که آن را بازنویسی نکند آن را به ارث می‌برد. بنابراین یک rem در تنظیم پیش‌فرض برابر 16 px است، و تبدیل‌های آشنا از همین‌جا می‌آیند: 0.5 rem برابر 8 px است و 1.5 rem برابر 24 px. اگر کاربر اندازهٔ پیش‌فرض را در تنظیمات مرورگرش بزرگ کرده باشد، همین مقادیر rem همراه با آن بزرگ می‌شوند — که دقیقاً هدف استفاده از آنهاست.
باید از rem استفاده کنم یا em؟
rem برای هر چیزی که باید از کل صفحه پیروی کند — مقیاس متن، فاصله‌گذاری، عرض چیدمان — چون از ریشه اندازه‌گیری می‌شود و هرگز انباشته نمی‌شود. em برای هر چیزی که باید از متنی که در آن قرار دارد پیروی کند: فاصلهٔ داخلی یک دکمه، فاصلهٔ کنار یک آیکون، تورفتگی یک نقل‌قول. اشتباه رایج تودرتو کردن عنصرهایی با اندازهٔ em است، که در آن 1.2 em درون 1.2 em می‌شود 1.44 و سپس 1.73، تا جایی که متن پایین صفحه دو برابر اندازهٔ مورد نظر شود.
آیا پاسخ دقیق است؟
هر جا دو واحد با عددهای صحیح بر حسب یکدیگر تعریف شده باشند، بله — صفحه این را بالای عدد می‌گوید و تنها گرد کردن در تعداد رقم‌های نمایش‌داده‌شده است. جایی که نسبت اعشار متناهی ندارد، صفحه دوازده رقم معنادار نشان می‌دهد و می‌گوید رابطه تقریبی است، نه اینکه وانمود کند دقیق است.
آیا چیزی که تایپ می‌کنم از دستگاهم خارج می‌شود؟
نه. محاسبه در مرورگر شما انجام می‌شود؛ هیچ چیزی بارگذاری نمی‌شود و سروری هم نیست که چیزی به آن بارگذاری شود. یک بار صفحه را باز کنید؛ با قطع بودن شبکه هم به کار خود ادامه می‌دهد.
چرا طراح‌ها و توسعه‌دهنده‌ها px را به rem تبدیل می‌کنند
ابزارهای طراحی به زبان پیکسل حرف می‌زنند. یک طرح اولیه می‌گوید عنوان 32 px است، فاصله میان بخش‌ها 48 px و دکمه 16 px فاصلهٔ داخلی دارد. شیوه‌نامه‌ها، اگر خوب نوشته شوند، به زبان rem حرف می‌زنند. شکاف میان این دو زبان جایی است که این صفحه قرار دارد: اندازه‌ای را بر حسب پیکسل تایپ می‌کنید و بر حسب rem می‌خوانید تا عددی که در CSS می‌گذارید همان معنایی را بدهد که طراح در نظر داشت. تبدیل px به rem کار کوچکی است، اما در عمر یک وب‌سایت صدها بار انجام می‌شود و مبنای نادرست یک چیدمان دقیق را همه‌جا یک‌جا کمی نادرست می‌کند.
دلیل اینکه اصلاً سراغ rem می‌رویم دسترس‌پذیری و انعطاف است. rem مضربی از اندازهٔ قلم ریشه است که مرورگر آن را 16 px می‌گذارد مگر اینکه چیز دیگری گفته شود و خواننده آزاد است آن را در تنظیماتش عوض کند. بنابراین چیدمانی که با rem نوشته شده وقتی کسی با بینایی ضعیف اندازهٔ پیش‌فرض متن را بالا می‌برد شکلش را حفظ می‌کند: متن، فاصله‌ها و جعبه‌ها با هم بزرگ می‌شوند. چیدمان نوشته‌شده با پیکسل پیروی نمی‌کند و خواننده‌ای که متن بزرگ‌تر خواسته حرف‌های بزرگ‌تر در جعبه‌های تنگ می‌گیرد، یا هیچ چیز. به همین دلیل تقریباً هر راهنمای سبک امروزی یک چیز می‌گوید: برای متن و فاصله از rem استفاده کنید.
این صفحه محاسبه را در مرورگر شما انجام می‌دهد. چیزی بارگذاری نمی‌شود و چیزی که تبدیل به آن بستگی دارد، یعنی اندازهٔ مبنا، پایین نوشته شده و در فیلدی است که می‌توانید عوض کنید، به جای اینکه پشت سر شما فرض شود. در ادامه فرمول، جدول اندازه‌های رایج، دلیل اهمیت مبنا، تله‌هایی که کسانی را که عجله‌ای px را به rem تبدیل می‌کنند می‌گیرند و راهنمای کوتاهی برای استفاده از نتیجه در شیوه‌نامه‌های واقعی را می‌یابید.
فرمول و مبنا
rem برابر px تقسیم بر مبنا است
فرمول یک تقسیم است: rem = px ÷ base. با مبنای معمول 16 px، اندازهٔ 24 px می‌شود 1.5 rem، مقدار 32 px می‌شود 2 rem و 8 px می‌شود 0.5 rem. صفحه نتیجه را همان‌طور که تایپ می‌کنید نشان می‌دهد و مبنایی را که به کار برده هم نشان می‌دهد، پس خط 24 px = 1.5 rem (16 px) دقیقاً می‌گوید چه فرض شده است.
16 از کجا می‌آید
مبنا از 16 px شروع می‌شود چون مرورگر وقتی کسی چیز دیگری نگوید همین را به کار می‌برد. قانون وب نیست؛ پیش‌فرضِ پیش‌فرض است و دهه‌هاست پایدار مانده. اگر CSS شما هیچ‌گاه اندازهٔ قلم ریشه را دست نزند، 1 rem برای بیشتر بازدیدکننده‌ها 16 px است. اگر دست بزند، مبنا هر چیزی است که شما گذاشته‌اید.
ترفند 62.5% و چرا مردم آن را به کار می‌برند
بعضی شیوه‌نامه‌ها اندازهٔ ریشه را روی 62.5% می‌گذارند که در مرورگر پیش‌فرض 1 rem را برابر 10 px می‌کند، تا 24 px ساده 2.4 rem باشد و محاسبه در ذهن آسان شود. کار می‌کند، اما هزینه دارد: کل صفحه حالا به آن درصد بستگی دارد و هر مؤلفه‌ای که 16 را مبنا بداند خیلی کوچک درمی‌آید. اگر پروژهٔ شما این کار را می‌کند، 10 را در فیلد مبنای این صفحه تایپ کنید و هر رقم با CSS شما می‌خواند.
تبدیل چه چیزی را نگه می‌دارد و چه چیزی را نمی‌تواند
تناسب را نگه می‌دارد
یک rem هر چه اندازهٔ قلم ریشه باشد است، پس چیدمانی که با rem نوشته شده وقتی آن اندازه تغییر کند شکلش را حفظ می‌کند. کل دلیل نوشتن آن به این شکل همین است. وقتی px را به rem تبدیل می‌کنید، عددی که می‌گیرید همان تناسبی است که مقدار پیکسلی در مبنای انتخابی شما داشت، حالا به شکلی بیان شده که مقیاس می‌پذیرد.
تنظیمات خوانندهٔ شما را نمی‌داند
عدد کاملاً به مبنا بستگی دارد. اگر CSS شما اندازهٔ دیگری روی عنصر ریشه بگذارد، یا خواننده اندازهٔ پیش‌فرض متن را در مرورگرش عوض کرده باشد، که بسیاری می‌کنند و حق دارند، آن‌وقت 1 rem برای آنها 16 px نیست. رقم صفحه فقط برای مبنای داخل فیلد درست است. این نقص ابزار نیست بلکه طبیعت واحد است: نسبی است و واحد نسبی مقدار ثابتی برای تبدیل ندارد.
گرد کردن
تقسیم بر 16 برای بسیاری از اندازه‌های رایج نتیجهٔ تمیز (16، 24، 32، 48، 64) و برای بعضی اعشار تکرارشونده می‌دهد (10 px برابر 0.625 rem است؛ 13 px برابر 0.8125). صفحه به اندازهٔ لازم رقم می‌دهد و شما تصمیم می‌گیرید در شیوه‌نامه چند رقم نگه دارید. مرورگرها اعشار بلند را بی‌مشکل پردازش می‌کنند، اما مقدار گردشده مثل 0.8125rem از مقداری با ده رقم راحت‌تر خوانده و نگه‌داری می‌شود.
اندازه‌های رایج
جدول پایین صفحه
زیر مبدل جدولی از اندازه‌های رایج می‌یابید: 8 px برابر 0.5 rem است، 10 px برابر 0.625، 12 px برابر 0.75، 14 px برابر 0.875، 16 px برابر 1، 18 px برابر 1.125، 20 px برابر 1.25، 24 px برابر 1.5، 32 px برابر 2، 48 px برابر 3 و 64 px برابر 4. این‌ها اندازه‌هایی هستند که در مقیاس‌های متن و نظام‌های فاصله بیش از همه پیش می‌آیند و داشتنشان جلوی چشم یک تبدیل را صرفه‌جویی می‌کند.
مقیاسی بر پایهٔ rem
عادت مفید این است که مجموعهٔ کوچکی از مقدارهای rem انتخاب کنید و دوباره از آنها استفاده کنید: 0.5، 1، 1.5، 2، 3 و 4 برای فاصله، و 0.875، 1، 1.25، 1.5، 2 برای متن. طراح‌ها این را مقیاس می‌نامند و سایت را از نظر بصری یکدست نگه می‌دارد. وقتی طرح اولیه مقداری نامعمول مثل 22 px می‌دهد، با مبدل ببینید 1.375 rem است و بعد تصمیم بگیرید به نزدیک‌ترین مقدار مقیاس خود گرد کنید یا نه.
چگونه اینجا px را به rem تبدیل کنیم
مقدار پیکسلی را تایپ کنید
اندازه را بر حسب پیکسل در فیلد اول وارد کنید. اعشار پذیرفته می‌شود، پس 13.5 px هم مثل 14 کار می‌کند.
مبنا را بررسی کنید
اگر CSS شما اندازهٔ ریشه را تغییر نمی‌دهد آن را روی 16 بگذارید. اگر می‌دهد، عوضش کنید. نتیجه همان‌طور که تایپ می‌کنید به‌روز می‌شود.
مقدار rem را کپی کنید
رقم را بخوانید و در CSS خود به کار ببرید، با واحد نوشته‌شده بعد از آن: font-size: 1.5rem. واحد را فراموش نکنید، چون عدد بی‌واحد در بیشتر ویژگی‌ها معنای دیگری دارد.
این واحدها از کجا می‌آیند
پیکسل CSS پیکسل صفحهٔ نمایش شما نیست
وقتی نمایشگرها دیگر چگالی قابل پیش‌بینی نداشتند، صفحه‌ای که با پیکسل واقعی اندازه گرفته می‌شد صفحه‌ای شد که با تیزتر شدن صفحه‌ها کوچک می‌شد. پس پیکسل CSS به عنوان طولی مرجع بازتعریف شد: حدود 1/96 اینچ در فاصلهٔ خواندن راحت. هر چیز دیگر در این صفحه بر آن بنا شده است. em از وب قدیمی‌تر است: در حروف سربی عرض یک قطعهٔ ریخته‌گری بود که از حرف بزرگ M نام گرفته بود و در CSS یعنی اندازهٔ قلم جاری، که به همین دلیل با تو در تو شدن عنصرها تغییر می‌کند. rem برای فرار از همین اضافه شد: em عنصر ریشه است و هیچ‌گاه انباشته نمی‌شود.
چرا rem وجود دارد
پیش از rem، توسعه‌دهنده‌ها همه‌چیز را با em یا درصد اندازه می‌دادند و عنصرهای تو در تو در هم ضرب می‌شدند: فهرستی داخل فهرستی داخل فهرستی با هر سطح کوچک یا بزرگ می‌شد. rem یک مرجع ثابت، یعنی ریشه، به آنها داد و انباشتگی را برداشت. اگر می‌خواهید این دو را مقایسه کنید، px را به em تبدیل کنید و ببینید همان مقدار پیکسلی چگونه به عنصری که در آن قرار دارد بستگی پیدا می‌کند.
rem را در عمل کجا می‌بینید
متن
متن اصلی معمولاً 1 rem است، عنوان‌ها 1.25 تا 3 rem و نوشتهٔ ریز 0.75 تا 0.875 rem. نوشتن آنها با rem به خواننده اجازه می‌دهد با تغییر یک تنظیم مرورگر کل صفحه را بزرگ کند.
فاصله و چیدمان
حاشیه، فاصلهٔ داخلی و شکاف‌ها با rem فضای خالی را با متن متناسب نگه می‌دارند. وقتی متن بزرگ می‌شود، فضای اطرافش هم بزرگ می‌شود و چیدمان به جای چپاندن حرف‌های بزرگ‌تر در جعبه‌های قدیمی متعادل می‌ماند.
کوئری‌های رسانه
نقطه‌های شکستی که با em یا rem نوشته شوند به اندازهٔ متن خواننده واکنش نشان می‌دهند، پس برای کسی که متن را بزرگ کرده چیدمان زودتر به شکل باریکش درمی‌آید. ظرافتی است که دانستنش می‌ارزد، هرچند پیکسل در نقطه‌های شکست هنوز رایج است.
چه چیزی را با پیکسل بگذاریم
حاشیه‌های بسیار نازک، سایه‌های جعبه و آیکون‌های باریک اغلب با اندازهٔ ثابت پیکسلی بهترین به نظر می‌رسند، چون حاشیه‌ای 0.0625rem که با متن بزرگ به 0.1rem برسد به کسی کمک نمی‌کند. برای چیزی که باید مقیاس شود rem و برای چیزی که نباید پیکسل به کار ببرید.
تله‌ها هنگام تبدیل px به rem
فراموش کردن اینکه مبنا همیشه 16 نیست
اگر پروژه‌ای html { font-size: 62.5% } می‌گذارد یا اندازهٔ ریشهٔ سیال به کار می‌برد، ضریب فرق می‌کند. پیش از اعتماد به عددی از هر مبدلی، از جمله این یکی، شیوه‌نامه را بررسی کنید.
تبدیل خود اندازهٔ ریشه
اگر اندازهٔ ریشه را با پیکسل بگذارید، تنظیم مرورگر خواننده نادیده گرفته می‌شود و فایدهٔ rem از دست می‌رود. ریشه را به صورت درصد بگذارید یا دست نزنید تا ترجیح کاربر رعایت شود.
استفاده از rem داخل مؤلفه‌ای که اندازهٔ قلم خودش را دارد
rem همیشه به ریشه ارجاع می‌دهد، نه به مؤلفه. دکمه‌ای با اندازهٔ قلم 14 px و فاصلهٔ داخلی 1rem فاصله‌ای دارد که از متن خود دکمه پیروی نمی‌کند. اگر فاصله‌ای می‌خواهید که از متن عنصر پیروی کند، این کار em است.
قاطی کردن واحدها بدون برنامه
شیوه‌نامه‌ای که برای یک margin از px، برای بعدی از rem و برای سومی از em استفاده می‌کند استدلال کردن دربارهٔ آن سخت است. قاعده‌ای انتخاب کنید: rem برای متن و فاصله، پیکسل برای حاشیه‌ها و سایه‌ها، و به آن پایبند بمانید.
پرسش‌هایی که مردم پیش از تبدیل می‌پرسند
16 px چند rem است؟
یک، در مرورگر پیش‌فرض. شانزده تقسیم بر مبنای شانزده.
آیا rem از px بهتر است؟
برای متن و فاصله، در بیشتر پروژه‌ها انتخاب بهتری است، چون تنظیمات خواننده را رعایت می‌کند. پیکسل برای چیزهایی که نباید مقیاس شوند همچنان درست است.
چرا نتیجهٔ من با سایت دیگری فرق دارد؟
احتمالاً مبنای متفاوت. فیلد را بررسی کنید: بعضی ابزارها 10 فرض می‌کنند، بعضی 16، بعضی 14. این صفحه مبنا را کنار نتیجه نشان می‌دهد.
آیا باید گرد کنم؟
خیر. مرورگرها اعشار بلند را می‌پذیرند. فقط برای خوانایی گرد کنید.
آیا عدد من بارگذاری می‌شود؟
خیر. محاسبه در مرورگر شما انجام می‌شود و چیزی به جایی فرستاده نمی‌شود.
چگونه برگردم؟
با rem به px، که به جای تقسیم، ضرب می‌کند.
انتخاب هوشمندانه هنگام تبدیل px به rem
برای پروژه مبنا را تعیین کنید و به آن پایبند بمانید
هر چه انتخاب می‌کنید آن را یک تصمیم کنید و در مستندات پروژه بنویسید. تیمی که دربارهٔ مبنا اختلاف‌نظر دارد مؤلفه‌هایی می‌سازد که با هم جور نمی‌شوند.
در مرحلهٔ طراحی تبدیل کنید، نه در لحظهٔ آخر
اگر هنگام خواندن طرح اولیه px را به rem تبدیل کنید، مقیاس را در طراحی می‌سازید و مقدارهای نامعمول را زود می‌بینید. اگر آخر کار انجام دهید، آنها را به شکل انبوهی از عددهای ناهماهنگ کشف می‌کنید.
واحدهای دید را هم در نظر بگیرید
برای عنوان‌هایی که باید صفحه را پر کنند، px به vw اندازه را به صورت سهمی از دید بیان می‌کند. مقیاس‌پذیری‌اش با rem فرق دارد و این دو اغلب با هم ترکیب می‌شوند.
عادت‌هایی که تبدیل px به rem را آسان‌تر می‌کنند
جدول تبدیل را در ذهن داشته باشید
با مبنای 16، چند لنگر بیشتر کار را پوشش می‌دهند: 4 px برابر 0.25 rem است، 8 px برابر 0.5، 12 px برابر 0.75، 16 px برابر 1، 24 px برابر 1.5 و 32 px برابر 2. وقتی طرح اولیه مقداری میان آنها می‌دهد، پیش از اینکه px را در صفحه به rem تبدیل کنید می‌توانید تخمین بزنید و مبدل را فقط برای تأیید به کار ببرید. بعد از چند هفته جدول را بی‌نگاه می‌دانید.
بگذارید نظام طراحی کار را بکند
اگر تیم شما توکن‌های طراحی نگه می‌دارد، مثل spacing-2 یا font-lg، آنها را یک بار با rem ذخیره کنید و بگذارید همه به نام‌ها ارجاع دهند. آن‌وقت کسی دیگر لازم نیست px را به rem تبدیل کند و تغییر در مقیاس در یک جا انجام می‌شود. مبدل ابزاری است که هنگام نوشتن توکن‌ها به کار می‌برید، نه هنگام استفاده از آنها.
مقدار پیکسلی را در یک توضیح بنویسید
خطی مثل padding: 1.25rem; /* 20px */ چند نویسه هزینه دارد و توسعه‌دهندهٔ بعدی را از سراغ ماشین‌حساب رفتن نجات می‌دهد. همچنین ثبت می‌کند چه مبنایی فرض کرده‌اید که اگر اندازهٔ ریشه بعدها عوض شود کمک می‌کند.
با تنظیم مرورگر تغییرکرده آزمایش کنید
اثبات اینکه صفحه‌ای با rem ساخته شده این است که از اندازهٔ پیش‌فرض بزرگ‌تر متن جان سالم به در می‌برد. تنظیم را در مرورگر عوض کنید، دوباره بارگذاری کنید و نگاه کنید. مؤلفه‌هایی که می‌شکنند آن‌هایی هستند که چیزی با پیکسل مانده یا ارتفاع ثابتی متن را بریده است.
مبدل‌های مرتبط
همین خانوادهٔ ابزارها تبدیل‌های همسایه را پوشش می‌دهد. برای برگشت به پیکسل از rem به px استفاده کنید. برای اندازه‌های نسبت به عنصر، px به em و em به px هست، و برای اندازه‌های نسبت به صفحه، px به vw و vw به px. اگر کار شما علاوه بر اندازه‌ها شامل رنگ هم هست، HEX به RGB، RGB به HEX و HEX به HSL نمادگذاری‌های شیوه‌نامه را مدیریت می‌کنند.
یک مثال عملی
فرض کنید طرح اولیه عنوان کارت را 28 px، فاصلهٔ داخلی کارت را 20 px و شکاف میان کارت‌ها را 12 px می‌دهد و پروژهٔ شما از مبنای پیش‌فرض 16 px استفاده می‌کند. 28 را تایپ می‌کنید و 1.75 rem می‌خوانید، 20 را تایپ می‌کنید و 1.25 rem می‌خوانید، 12 را تایپ می‌کنید و 0.75 rem می‌خوانید. در شیوه‌نامه می‌نویسید font-size: 1.75rem، padding: 1.25rem و gap: 0.75rem. بازدیدکننده‌ای که اندازهٔ متن مرورگر را به 20 px بالا ببرد همان کارت را می‌بیند که یک‌چهارم بزرگ‌تر شده: عنوان 35 px، فاصلهٔ داخلی 25 px و شکاف 15 px، همه متناسب. اگر پیکسل نوشته بودید، عنوان روی 28 می‌ماند و کارت نادرست به نظر می‌رسید.
یک فهرست بررسی کوتاه
پیش از تبدیل
مبنایی را که CSS شما به کار می‌برد پیدا کنید. تصمیم بگیرید کدام اندازه‌ها باید مقیاس شوند و کدام نه.
هنگام تبدیل
مقدار پیکسلی را تایپ کنید، مبنای نشان‌داده‌شده کنار نتیجه را بررسی کنید و رقم rem را با واحدش کپی کنید.
پس از تبدیل
صفحه را با اندازهٔ پیش‌فرض بزرگ‌تر متن در مرورگر آزمایش کنید و دنبال جعبه‌هایی بگردید که دیگر متنشان را نگه نمی‌دارند.
اشتباه‌های رایج
فرض اینکه 1 rem همیشه 16 px است
فقط وقتی است که کسی اندازهٔ ریشه را عوض نکرده باشد، و بعضی خواننده‌ها عوض کرده‌اند. چیدمان را طوری بنویسید که در اندازه‌های دیگر هم کار کند.
گذاشتن اندازهٔ ریشه با پیکسل
انتخاب خواننده را نادیده می‌گیرد. درصد به کار ببرید یا آن را نگذارید.
تبدیل همه‌چیز
هر اندازه‌ای نباید مقیاس شود. حاشیه‌ها و سایه‌ها را با پیکسل بگذارید.
عددهای شما روی دستگاه شما می‌مانند
محاسبه محلی انجام می‌شود. مقدارهای شما را مرورگر خودتان به کار می‌برد و چیزی به جایی فرستاده نمی‌شود. بعداً چیزی برای حذف نیست و حسابی برای ساختن نیست. این راه ساده برای تبدیل px به rem است.
خلاصه
برای تبدیل px به rem در اینجا، اندازه را بر حسب پیکسل تایپ کنید و بی‌درنگ بر حسب rem بخوانید، با فرمول rem = px ÷ base. مبنا از 16 px شروع می‌شود، پیش‌فرض مرورگر، و می‌توانید آن را با CSS خود هماهنگ کنید. تبدیل تناسب را نگه می‌دارد: چیدمانی که با rem نوشته شده وقتی اندازهٔ قلم ریشه تغییر کند شکلش را حفظ می‌کند. تنظیمات خوانندهٔ شما را نمی‌داند، پس رقم فقط برای مبنای داخل فیلد درست است. اندازه‌های رایج در جدول زیر مبدل، از 8 px با 0.5 rem تا 64 px با 4 rem، شما را از تکرار محاسبه بی‌نیاز می‌کنند. چیزی بارگذاری نمی‌شود.