px থেকে rem এবং em কনভার্টার

এই কনভার্টার যা করে

এই টুলটি পিক্সেল মানকে rem এবং em-এ রূপান্তর করে, আবার বিপরীত দিকেও রূপান্তর করে। তিনটি একক ফিল্ডের যেকোনো একটিতে একটি মান লিখলে, বাকি দুটি ফিল্ড নিজে থেকেই হিসাব হয়ে দেখানো হয়। এর পাশাপাশি আপনি একটি কাস্টম রুট ফন্ট সাইজ এবং একটি em কনটেক্সট ফন্ট সাইজ সেট করতে পারেন, যাতে হিসাবটা কোনো সাধারণ ডিফল্টের বদলে আপনার নিজের ডিজাইনের সাথে মিলে যায়।

px, rem ও em — প্রতিটি ফিল্ড কী বোঝায়

কনভার্টারটি তিনটি ফিল্ড নিয়ে তৈরি। "রুট ফন্ট সাইজ (px)" ফিল্ডে থাকে পিক্সেলে সেই বেস ফন্ট সাইজ, যার সাপেক্ষে rem মান মাপা হয়। "em কনটেক্সট ফন্ট সাইজ (px)" ফিল্ডে থাকে সেই নির্দিষ্ট এলিমেন্টের ফন্ট সাইজ, যার জন্য আপনি em মান হিসাব করছেন। আর "মানসমূহ" অংশে আপনি px, rem বা em-এ নিজের দৈর্ঘ্যটি লিখেন। শুরুতে, কিছু পরিবর্তন করার আগে, ১৬px, ১rem এবং ১em — এই তিনটিই একই দৈর্ঘ্য বোঝায়; এটাই সেই বেসলাইন যা থেকে টুলটি কাজ শুরু করে, যতক্ষণ না আপনি অন্য কিছু নির্ধারণ করেন।

রুট ও em কনটেক্সট ফন্ট সাইজ সেট করা

রুট ফন্ট সাইজ ফিল্ডটি একটি সাধারণ সংখ্যা, যা অবশ্যই ০-এর চেয়ে বড় হতে হবে। এর ডিফল্ট মান ১৬px, যেখান থেকে টুলটি প্রতিবার শুরু হয়, যতক্ষণ না আপনি এটি বদলান। আপনার rem রূপান্তরগুলো এই সংখ্যার সাপেক্ষেই মাপা হয়, তাই আপনার প্রজেক্টের আসল রুট ফন্ট সাইজ ডিফল্ট থেকে আলাদা হলে, এই ফিল্ডটি বদলানোই rem মানগুলোকে আপনার ডিজাইনের জন্য সঠিক রাখার উপায়। এই ফিল্ড খালি রাখলে বা কোনো অবৈধ মান লিখলে টুলটি দেখায়: "রুট ফন্ট সাইজ অবশ্যই ০-এর চেয়ে বড় একটি সংখ্যা হতে হবে।"

em কনটেক্সট ফিল্ডও একইভাবে কাজ করে — ০-এর চেয়ে বড় একটি সংখ্যা, ডিফল্ট ১৬px — তবে এর উদ্দেশ্য আলাদা। em মান যেহেতু নির্দিষ্ট এলিমেন্টের ফন্ট সাইজের সাপেক্ষে মাপা হয় (রুটের সাপেক্ষে নয়), তাই টুলটি সেই এলিমেন্টের ফন্ট সাইজ আলাদাভাবে জিজ্ঞাসা করে। কোনো একটি নির্দিষ্ট এলিমেন্টের ফন্ট সাইজের ওপর ভিত্তি করে em মান হিসাব করতে চাইলে এই ফিল্ডটিই ব্যবহার করবেন। এখানে অবৈধ কিছু লিখলে টুলটি দেখায়: "em কনটেক্সট ফন্ট সাইজ অবশ্যই ০-এর চেয়ে বড় একটি সংখ্যা হতে হবে।"

মান লিখে রূপান্তর হতে দেখা

"মানসমূহ" অংশে তিনটি এককের জন্য তিনটি আলাদা ফিল্ড আছে। px, rem বা em — এই তিনটির যেকোনো একটিতে আপনি লিখলে, বর্তমানে সেট করা রুট ও em কনটেক্সট ফন্ট সাইজ ব্যবহার করে বাকি দুটি ফিল্ড আপনি টাইপ করার সাথে সাথেই নতুন করে হিসাব হয়ে যায়। উদাহরণ হিসেবে, রুট এবং em কনটেক্সট দুটোই ডিফল্ট ১৬px-এ রেখে px ফিল্ডে ২৪ লিখুন — rem ফিল্ড দেখাবে ১.৫rem, আর em ফিল্ড দেখাবে ১.৫em, কারণ ২৪ কে ১৬ দিয়ে ভাগ করলে ১.৫ হয়।

ঋণাত্মক পিক্সেল মানও লেখা যায়, তাই -৮px-এর মতো একটি মান ধনাত্মক মানের মতোই রূপান্তরিত হয় — ১৬px ডিফল্টে এটি -০.৫rem হয়ে যায়। "মানসমূহ" ফিল্ডে কোনো অবৈধ সংখ্যা লিখলে টুলটি দেখায়: "রূপান্তর করার জন্য একটি সংখ্যা লিখুন।"

রুট ফন্ট সাইজ বা em কনটেক্সট ফন্ট সাইজ বদলালে ফিল্ডে আগে থেকে লেখা মানও নতুন করে আপডেট হয়। যেমন, px ফিল্ডে ৪০ লেখা থাকলে, ১৬px রুটে rem ফিল্ড দেখায় ২.৫rem। px মান স্পর্শ না করে রুট ফন্ট সাইজ ২০px করলে, rem ফিল্ড আপডেট হয়ে ২rem দেখায় — কারণ rem-এর আউটপুট বর্তমানে সেট করা রুট ফন্ট সাইজ অনুসরণ করে, শুধু আপনার লেখা পিক্সেল সংখ্যাটি নয়।

সাধারণ px → rem টেবিল পড়া

রূপান্তর ফিল্ডগুলোর নিচে টুলটি একটি "সাধারণ px → rem (১৬px বেস)" টেবিল দেখায় — এতে প্রচলিত পিক্সেল মানগুলোকে বিশেষভাবে ১৬px রুট ফন্ট সাইজ ধরে rem-এ রূপান্তর করে দেখানো হয়েছে। লাইভ রূপান্তর ফিল্ডের পাশাপাশি এটি একটি স্থায়ী রেফারেন্স হিসেবে থাকে, যা কয়েকটি সাধারণ মান দ্রুত দেখে নিতে কাজে লাগে, প্রতিটি আলাদা করে "মানসমূহ" ফিল্ডে না লিখেই।

আপনার সংখ্যা কোথায় প্রসেস হয়

প্রতিটি রূপান্তর আপনার ব্রাউজারে সম্পন্ন হয়। আপনি যা লেখেন — মান হোক, রুট ফন্ট সাইজ হোক বা em কনটেক্সট ফন্ট সাইজ হোক — কোনোটিই BroBroGo-তে আপলোড করা হয় না।

এই টুল কাদের জন্য

এটি তাদের জন্য যারা রেসপন্সিভ লেআউটের জন্য নির্দিষ্ট পিক্সেল মানকে আপেক্ষিক rem বা em এককে রূপান্তর করছেন, যারা দেখতে চান রুট ফন্ট সাইজ বদলালে rem মান কীভাবে বদলায়, এবং যারা কোনো নির্দিষ্ট এলিমেন্টের নিজস্ব ফন্ট সাইজের ওপর ভিত্তি করে em মান হিসাব করছেন। পাঠক তার ডিফল্ট ফন্ট সাইজ বদলালে আপনার সাইজিং যেন প্রত্যাশামতোই কাজ করতে থাকে, তা নিশ্চিত করতে চাইলেও এই টুল কাজে আসবে।

প্রায়ই জিজ্ঞাসিত প্রশ্ন

px, rem এবং em-এর মধ্যে পার্থক্য কী? px হলো একটি নির্দিষ্ট দৈর্ঘ্য। rem পরিমাপ করা হয় পেজের রুট ফন্ট সাইজের সাপেক্ষে, তাই ১৬px রুটে, ১rem সমান ১৬px। em পরিমাপ করা হয় এটি যে এলিমেন্টের ভেতরে রয়েছে তার ফন্ট সাইজের সাপেক্ষে। rem-এ টাইপ এবং স্পেসিংয়ের আকার নির্ধারণ করলে পাঠক তাদের ডিফল্ট ফন্ট সাইজ পরিবর্তন করলে সবকিছু সেই অনুযায়ী স্কেল হয়।

আলাদা em কনটেক্সট সাইজ কেন রয়েছে? em তার নিজস্ব এলিমেন্টের ফন্ট সাইজের সাপেক্ষে কাজ করে, যা সবসময় রুট নাও হতে পারে। em সঠিকভাবে হিসাব করতে em কনটেক্সটকে সেই এলিমেন্টের ফন্ট সাইজে সেট করুন, এবং দুটি মিলে গেলে এটিকে রুটের সমান রাখুন।

আমার রুট ফন্ট সাইজ যদি ১৬px না হয় তবে কী হবে? আপনার CSS-এর সাথে মেলাতে রুট ফন্ট সাইজ ফিল্ডটি পরিবর্তন করুন এবং প্রতিটি rem মান সাথে সাথে আপডেট হয়ে যাবে। নিচের কুইক টেবিলটি সাধারণত ব্যবহৃত ১৬px রুটের জন্য একটি সহজ নির্দেশিকা যা বেশিরভাগ সাইট ব্যবহার করে থাকে।

ঋণাত্মক পিক্সেল মান কি রূপান্তর করা যায়? হ্যাঁ। টুলটি ঋণাত্মক পিক্সেল মান গ্রহণ করে এবং ধনাত্মক মানের মতোই সেগুলো রূপান্তর করে।

অক্ষর লিখলে বা কোনো ফিল্ড খালি রাখলে কী হবে? প্রতিটি ফিল্ড আলাদাভাবে যাচাই হয়। "মানসমূহ" ফিল্ডে অবৈধ কিছু লিখলে দেখায় "রূপান্তর করার জন্য একটি সংখ্যা লিখুন।", অবৈধ রুট ফন্ট সাইজে দেখায় "রুট ফন্ট সাইজ অবশ্যই ০-এর চেয়ে বড় একটি সংখ্যা হতে হবে।", আর অবৈধ em কনটেক্সট ফন্ট সাইজে দেখায় "em কনটেক্সট ফন্ট সাইজ অবশ্যই ০-এর চেয়ে বড় একটি সংখ্যা হতে হবে।"

আমি যা লিখি তা কি কোথাও পাঠানো হয়? না। প্রতিটি রূপান্তর আপনার ব্রাউজারে সম্পন্ন হয়, এবং আপনি যা লেখেন তা BroBroGo-তে আপলোড করা হয় না।