تبدیل Pixel به REM رایگان

نحوه کار

همه تبدیل‌ها کاملاً در مرورگر شما با استفاده از یک موتور حساب دست‌نویس با صفر وابستگی اجرا می‌شوند. ابزار بین هفت واحد CSS (px، rem، em، pt، vw، vh، و %) با هدایت هر محاسبه از طریق پیکسل به‌عنوان یک پایه مشترک، اعمال تقسیم یا ضرب ساده در برابر اندازه فونت ریشه، اندازه فونت والد، یا ابعاد ویوپورت پیکربندی‌شده شما تبدیل می‌کند.

1. 1
   مقادیر زمینه خود را تنظیم کنید

   پیش از تبدیل، چهار عددی که واحدهای نسبی CSS را معنادار می‌کنند پیکربندی می‌کنید: اندازه فونت ریشه (پیش‌فرض ۱۶px، که پیش‌فرض مرورگر است)، اندازه فونت عنصر والد (برای تبدیل‌های em و %)، و عرض و ارتفاع ویوپورت (برای vw و vh). این‌ها همان مقادیری هستند که مرورگر شما هنگام حل CSS در زمان اجرا استفاده می‌کند.
2. 2
   پیکسل به‌عنوان میانی جهانی

   تبدیل‌کننده ابتدا toPixels() را فراخوانی می‌کند تا ورودی شما را به یک تعداد پیکسل خام نرمال کند — مثلاً ۱٫۵rem می‌شود ۱٫۵ × baseFontPx، و ۵۰vw می‌شود ۰٫۵ × vpWidth. سپس fromPixels() آن تعداد پیکسل را بر ضریب مناسب واحد هدف تقسیم می‌کند. هر هفت واحد همزمان در جدول تبدیل نشان داده می‌شوند.
3. 3
   جست‌وجوی نزدیک‌ترین توکن Tailwind

   پس از تبدیل، ابزار مقدار rem را محاسبه می‌کند و دو جدول جست‌وجوی کدثابت را اسکن می‌کند — سیزده توکن اندازه-فونت Tailwind (text-xs تا text-9xl) و مقیاس فاصله آن — نزدیک‌ترین تطبیق را با فاصله مطلق می‌یابد. یک علامت = یعنی مقدار یک توکن دقیق است؛ ≈ یعنی نزدیک‌ترین تقریب است.
4. 4
   بازنویسی دسته‌ای CSS از طریق عبارت باقاعده

   پنل چسباندن-CSS متن خام CSS را می‌پذیرد و یک جایگزینی عبارت باقاعده اعمال می‌کند: در حالت px→rem هر توکن px را تطبیق می‌دهد و بخش عددی را با value/baseFontPx + rem جایگزین می‌کند؛ در حالت rem→px برعکس عمل می‌کند. تعداد جایگزینی نشان داده می‌شود پس می‌توانید تأیید کنید چند مقدار بازنویسی شدند.

ابزارهای مرتبط