مفت Pixel سے REM کنورٹر
قابل ترتیب base font size کے ساتھ px، rem، em، pt، vw، vh، اور % کے درمیان تبدیل کریں۔ عام pixel سائزز کے لیے حوالہ جاتی جدول شامل ہے۔
سیاق (rem/em/vw/vh/% کو متاثر کرتا ہے)
قریب ترین Tailwind ٹوکنز (16px روٹ پر)
عام پکسل سائز → rem (16px بیس پر)
شامل کردہ CSS تبدیل کریں
عام استعمالات
- ویب ڈیولپمنٹ کے لیے PX سے REMسکیل کے قابل، رسائی کے لیے پکسل کی قدروں کو rem یونٹس میں تبدیل کریں CSS۔ اپنی بنیادی فانٹ سائز متعین کریں اور فوری طور پر تمام مساوی قدریں دیکھیں۔
- ری ایسپانسیو ڈیزائن کے لیے CSS یونٹسpx، vw، vh، اور % کے درمیان تبدیل کریں تاکہ مختلف اسکرین سائزز اور سمتوں کے لیے صحیح طریقے سے ری ایسپانس کرنے والے لے آؤٹ بنائیں۔
- ڈیزائن کی تفصیلات کو CSS یونٹس میں تبدیل کریںFigma یا Sketch پکسل کی قدروں کو صاف، سکیل کے قابل CSS کے عمل کے لیے rem/em یونٹس میں ترجمہ کریں۔
- Tailwind CSS یونٹ ریفرنسسمجھیں کہ Tailwind CSS سائزنگ کلاسز پکسل اور rem قدروں میں کیسے نقشہ بندی کرتی ہیں درست عمل کے لیے۔
- پرنٹ سٹائل شیٹس کے لیے CSS یونٹس تبدیل کریںپرنٹ میڈیا کویریز اور PDF آؤٹ پٹ CSS کے لیے px، pt، اور rem کے درمیان تبدیل کریں۔
یہ کیسے کام کرتا ہے
تمام تبدیلیاں مکمل طور پر آپ کے براؤزر میں ایک ہاتھ سے لکھے گئے ریاضی انجن کا استعمال کرتے ہوئے چلتی ہیں جس میں کوئی انحصار نہیں۔ یہ ٹول سات CSS اکائیوں (px, rem, em, pt, vw, vh, اور %) کے درمیان تبدیلی کرتا ہے، ہر حساب کو پکسلز کے بطور مشترکہ بنیاد گزارتے ہوئے، آپ کے مقرر کردہ root فونٹ سائز، parent فونٹ سائز، یا viewport طول و عرض کے خلاف سادہ تقسیم یا ضرب لگا کر۔
- 1اپنی سیاق و سباق کی اقدار مقرر کریںتبدیلی سے پہلے، آپ چار نمبروں کو ترتیب دیتے ہیں جو نسبتی CSS اکائیوں کو معنی خیز بناتے ہیں: root فونٹ سائز (ڈیفالٹ 16px، جو براؤزر کا ڈیفالٹ ہے)، parent ایلیمنٹ فونٹ سائز (em اور % تبدیلیوں کے لیے)، اور viewport چوڑائی اور اونچائی (vw اور vh کے لیے)۔ یہ وہی اقدار ہیں جو آپ کا براؤزر رن ٹائم پر CSS حل کرتے وقت استعمال کرے گا۔
- 2عالمگیر درمیانی اکائی کے طور پر پکسلکنورٹر پہلے toPixels() کو کال کرتا ہے تاکہ آپ کے ان پٹ کو خام پکسل تعداد میں معمول پر لایا جا سکے — مثال کے طور پر، 1.5rem، 1.5 × baseFontPx بن جاتا ہے، اور 50vw، 0.5 × vpWidth بن جاتا ہے۔ پھر fromPixels() اس پکسل تعداد کو ہدف اکائی کے لیے مناسب عنصر سے تقسیم کرتا ہے۔ تمام سات اکائیاں بیک وقت تبدیلی کے جدول میں دکھائی جاتی ہیں۔
- 3قریب ترین Tailwind ٹوکن تلاشتبدیلی کے بعد، ٹول rem قدر کا حساب لگاتا ہے اور دو مقررہ لُک اپ ٹیبلز کو اسکین کرتا ہے — Tailwind کے تیرہ فونٹ سائز ٹوکنز (text-xs سے text-9xl تک) اور اس کا اسپیسنگ اسکیل — مطلق فاصلے سے قریب ترین مماثلت تلاش کرتا ہے۔ ایک = نشان کا مطلب ہے کہ قدر عین ٹوکن ہے؛ ≈ کا مطلب ہے کہ یہ قریب ترین تخمینہ ہے۔
- 4regex کے ذریعے بیچ CSS دوبارہ لکھناپیسٹ-CSS پینل خام CSS متن قبول کرتا ہے اور ایک regex متبادلہ لاگو کرتا ہے: px→rem موڈ میں یہ ہر px ٹوکن سے مماثل ہوتا ہے اور عددی حصے کو value/baseFontPx + rem سے بدل دیتا ہے؛ rem→px موڈ میں یہ الٹا کرتا ہے۔ متبادلہ کی تعداد دکھائی جاتی ہے تاکہ آپ تصدیق کر سکیں کہ کتنی اقدار دوبارہ لکھی گئیں۔
متعلقہ ٹولز
اکائی کنورٹر
لمبائی، وزن، درجہ حرارت، رقبہ، حجم اور مزید کی اکائیوں کے درمیان تبدیل کریں۔
CSS clamp() جنریٹر
responsive typography اور spacing کے لیے fluid CSS clamp() ویلیو بنائیں۔ کم سے کم/زیادہ سے زیادہ سائز اور viewport رینج ترتیب دیں، لائیو پریویو دیکھیں، اور ایک لائن CSS کاپی کریں۔
CSS گرڈ جنریٹر
CSS گرڈ کو بصری طور پر ڈیزائن کریں — ٹریکس، یونٹ اور gaps — اور تیار شدہ CSS اور HTML کو کاپی کریں۔