Posted on • Updated on
درک واحد REM در CSS
پرسشهای متداول درباره واحد REM در CSS
در پایان به چند پرسش متداول درباره واحد REM در CSS پاسخ میدهیم.
تفاوت واحدهای rem و em چیست؟
تفاوت اصلی واحدهای rem و em در نقطه مرجع اندازه پایه آنهاست. واحد em نسبت به font-size عنصر والد خود است. rem به معنی «root em» است و فقط نسبت به عنصر ریشه (html) سنجیده میشود. این ویژگی، واحد rem را در وبسایتهای بزرگ قابلپیشبینیتر و مدیریت آن را آسانتر میکند.
چگونه پیکسل را در CSS به واحد rem تبدیل کنم؟
برای تبدیل پیکسل به rem، باید اندازه 1rem را بدانید که مقدار پیشفرض آن 16px است.
سپس فرمول px / rem را به کار ببرید.
اگر 1rem برابر با 16px باشد، 32px به 32 / 16 = 2rem تبدیل میشود.
برای تبدیل آسان از مبدل PX به REM ما استفاده کنید.
چگونه واحد rem را در CSS به پیکسل تبدیل کنم؟
برای تبدیل rem به پیکسل، اندازه 1rem را بدانید که پیشفرض آن 16px است.
فرمول rem * rem size را اعمال کنید.
اگر 1rem برابر 16px باشد، 2rem به 2 * 16 = 32px تبدیل میشود.
از مبدل REM به PX ما استفاده کنید.
آیا میتوانم از واحد rem برای سبکهایی غیر از font-size استفاده کنم؟
بله، rem برای هر ویژگی CSS که مقدار طول میپذیرد، نه فقط font-size، قابل استفاده است: width، height، padding، margin و line-height. این کار به حفظ چیدمان متناسب کمک میکند.
آیا واحد rem در همه مرورگرها پشتیبانی میشود؟
بله، واحد rem بهطور گسترده در مرورگرهای مدرن مانند Chrome، Firefox، Safari و Edge پشتیبانی میشود. برای اطلاعات پشتیبانی به مستندات caniuse مراجعه کنید.
استفاده از واحد rem چگونه طراحی واکنشگرا را بهبود میدهد؟
واحد rem برای طراحی واکنشگرا بسیار مفید است. چون به عنصر ریشه وابسته است، تغییر font-size ریشه به شما اجازه میدهد اندازه همه عناصر تعریفشده با rem را تنظیم کنید. با مدیا کوئریها میتوان برای نقاط شکست مختلف اندازه فونتهای متفاوتی تعیین کرد.
استفاده از واحد rem چه اثری بر دسترسپذیری مرورگر دارد؟
استفاده از rem دسترسپذیری سایت را بهطور چشمگیری بهبود میدهد. برخی کاربران اندازه فونت پیشفرض را برای خواندن بهتر تغییر میدهند؛ چون rem نسبت به این font-size است، چیدمان و فاصلهها با ترجیحات کاربر سازگار میشوند.
آیا میتوانم واحد rem را با واحد دیگری ترکیب کنم؟
بله، میتوان rem را برای انعطاف بیشتر با واحد CSS دیگری ترکیب کرد. مثلاً برای border-width که نباید با متن مقیاس شود از px و برای padding که باید مقیاس شود از rem استفاده کنید.
چگونه اندازه فونت پایه را برای واحد rem تنظیم کنم؟
font-size پایه برای rem روی عنصر ریشه (html) تنظیم میشود: html { font-size: 20px; }. همه واحدهای rem از این اندازه استفاده میکنند.
بهترین روشها برای استفاده از واحد rem چیست؟
در طراحی واکنشگرا، روی عنصر ریشه اندازه فونت پایه مناسبی تنظیم کنید، برای ویژگیهایی که باید با متن مقیاس شوند از rem استفاده کنید و طراحی را با اندازههای پایه متفاوت برای دسترسپذیری آزمایش کنید.