مبدل CSS px ↔ rem
تبدیل بین واحدهای CSS px و rem.
px (پیکسل)
یک واحد مطلق که یک پیکسل را روی صفحه نمایش نشان می‌دهد. اندازه ثابتی دارد و برای طراحی واکنش‌گرا محدود است.
rem (Root EM)
یک واحد نسبی بر اساس اندازه فونت عنصر ریشه (html). برای دسترسی‌پذیری و طراحی واکنش‌گرا مفید است.
فرمول تبدیل
توصیه‌های استفاده
- • اندازه فونت: rem توصیه می‌شود
- • فاصله (margin, padding): rem توصیه می‌شود
- • حاشیه: px قابل استفاده است
- • مدیا کوئری‌ها: rem توصیه می‌شود
راهنمای کامل واحد CSS
انتخاب واحدهای CSS مناسب در توسعه وب به شدت بر تجربه کاربری و دسترسی‌پذیری تأثیر می‌گذارد. تفاوت‌های بین px و rem و نحوه استفاده از آنها در موقعیت‌های مناسب را بیاموزید.
📐 ویژگی‌ها
- • واحد مطلق با تطابق ۱:۱ با پیکسل‌های صفحه نمایش
- • اندازه ثابت در همه مرورگرها
- • کنترل دقیق طرح‌بندی امکان‌پذیر است
- • تحت تأثیر تنظیمات کاربر قرار نمی‌گیرد
✅ موارد استفاده توصیه شده
- • ضخامت حاشیه (۱ پیکسل، ۲ پیکسل)
- • آفست سایه
- • اندازه آیکون‌ها (۱۶ پیکسل، ۲۴ پیکسل)
- • تنظیمات دقیق فاصله
⚠️ هشدارها
- • تنظیمات اندازه فونت کاربر را نادیده می‌گیرد
- • ممکن است مشکلات دسترسی‌پذیری ایجاد کند
- • برای طراحی واکنش‌گرا محدود است
📐 ویژگی‌ها
- • بر اساس اندازه فونت عنصر ریشه (html)
- • تنظیمات کاربر را منعکس می‌کند
- • نسبت‌های ثابت را حفظ می‌کند
- • سازگار با دسترسی‌پذیری
✅ موارد استفاده توصیه شده
- • تنظیمات اندازه فونت
- • فاصله (margin, padding)
- • اندازه کانتینرها
- • نقاط شکست مدیا کوئری
💡 مزایا
- • نسبت‌ها را هنگام مقیاس‌بندی حفظ می‌کند
- • دسترسی‌پذیری را بهبود می‌بخشد
- • نگهداری آسان
🎯 استراتژی استفاده خاص واحد
تایپوگرافی
از rem برای اندازه‌های فونت و فاصله خط استفاده کنید rem
طرح‌بندی
از rem برای فاصله و کانتینرها استفاده کنید rem
جزئیات
از px برای حاشیه‌ها و سایه‌ها استفاده کنید px
📱 نکات طراحی واکنش‌گرا
رویکرد اول موبایل
اندازه فونت پایه را ۱۶ پیکسل تنظیم کنید و با واحدهای rem مقیاس‌بندی کنید
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }استفاده از مدیا کوئری
ثبات را با نقاط شکست مبتنی بر rem حفظ کنید
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ ملاحظات دسترسی‌پذیری
✅ روش‌های توصیه شده
- • اندازه فونت‌ها را با واحدهای rem تنظیم کنید
- • حداقل اندازه فونت ۱۶ پیکسل را حفظ کنید
- • فاصله خط کافی (۱.۵ یا بیشتر)
- • حداقل هدف لمس ۴۴ پیکسل
❌ مواردی که باید از آنها اجتناب کرد
- • استفاده از مقادیر ثابت px برای اندازه‌های فونت
- • متن کوچک زیر ۱۲ پیکسل
- • عرض کانتینر ثابت
- • فاصله خط ۱.۰ یا کمتر
🔧 پشتیبانی مرورگر و سازگاری
واحد px
پشتیبانی کامل در همه مرورگرها. از IE6+ در دسترس است.
واحد rem
پشتیبانی کامل در IE9+ و مرورگرهای مدرن. برای IE8 و پایین‌تر نیاز به جایگزین دارد.
برای پشتیبانی از IE8: ابتدا مقدار px را اعلام کنید، سپس مقدار rem را به عنوان جایگزین اضافه کنید
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */