CSS ইউনিট কনভার্টার কী?
CSS আকার নির্ধারণের জন্য বিভিন্ন ইউনিট সমর্থন করে — px ও pt-এর মতো অ্যাবসোলিউট (নিরঙ্কুশ) ইউনিট, এবং rem, em, vw, vh ও %-এর মতো রিলেটিভ (আপেক্ষিক) ইউনিট। রেসপনসিভ, অ্যাক্সেসিবল ডিজাইনের জন্য রিলেটিভ ইউনিট অপরিহার্য (rem বিশেষভাবে ব্যবহারকারীর ব্রাউজার ফন্ট-সাইজ পছন্দকে সম্মান করে), কিন্তু মনে মনে এগুলোর মধ্যে রূপান্তর করা সত্যিই কঠিন, কারণ ফলাফল প্রেক্ষাপটের উপর নির্ভর করে: রুট ফন্ট সাইজ, বর্তমান এলিমেন্টের ফন্ট সাইজ, বা ভিউপোর্ট মাত্রা।
এই কনভার্টারটি আপনার হয়ে সেই গণনা করে: আপনার বেস ফন্ট সাইজ, ভিউপোর্ট মাত্রা এবং যে মানটি আপনি রূপান্তর করছেন তা সেট করুন, এবং প্রতিটি অন্য ইউনিটে সমতুল্য মান তাৎক্ষণিকভাবে দেখুন — এটি একটি ডিজাইন মকআপের পিক্সেল পরিমাপকে রেসপনসিভ rem/vw মানে অনুবাদ করতে, বা একটি বিদ্যমান CSS নিয়ম আসলে স্ক্রিনে কী রূপে রেন্ডার হয় তা দুবার পরীক্ষা করতে সহায়ক।
এই ক্যালকুলেটর কখন ব্যবহার করবেন
- প্রজেক্ট শুরুর আগে টুলের খরচ যাচাই করতে চাইলে
- একই ধরনের অন্যান্য টুলের সাথে ফলাফল তুলনা করতে চাইলে
- বিভিন্ন পরিস্থিতিতে টুলটি কীভাবে ব্যবহার করতে হয় তা শিখতে চাইলে
- দলের সদস্য বা ক্লায়েন্টদের সাথে ফলাফল শেয়ার করতে চাইলে
- টুলের হিসাবের নির্ভুলতা যাচাই করতে চাইলে
- কোনো নির্দিষ্ট সমস্যার জন্য দ্রুত ও সহজ সমাধান খুঁজছেন
ধাপসমূহ:
- আপনি যে মানটি রূপান্তর করতে চান তা লিখুন এবং এর শুরুর ইউনিট নির্বাচন করুন।
- আপনার বেস ফন্ট সাইজ সেট করুন (ডিফল্টভাবে ব্রাউজার স্ট্যান্ডার্ড 16px)।
- vw/vh রূপান্তরের জন্য, আপনার লক্ষ্য ভিউপোর্ট প্রস্থ ও উচ্চতা লিখুন।
- প্রতিটি অন্য ইউনিটে সমতুল্য মান তাৎক্ষণিকভাবে পড়ুন।
সূত্র
1rem = 1em = বেস ফন্ট সাইজ (ডিফল্ট 16px)
1pt = 96/72 px ≈ 1.333px
1vw = ভিউপোর্ট প্রস্থ / 100
1vh = ভিউপোর্ট উচ্চতা / 100
1% = রেফারেন্স মান / 100
ব্যবহারের ক্ষেত্র
- একজন ডিজাইনারের পিক্সেল-ভিত্তিক Figma/Sketch স্পেককে অ্যাক্সেসিবল CSS-এর জন্য rem মানে রূপান্তর করা
- একটি নির্দিষ্ট স্ক্রিন প্রস্থে vw-ভিত্তিক রেসপনসিভ ফন্ট সাইজ আসলে কী রূপে রেন্ডার হয় তা পরীক্ষা করা
- প্রিন্ট বা ইমেইলের পুরনো pt-ভিত্তিক CSS-কে ওয়েব-স্ট্যান্ডার্ড px বা rem-এ অনুবাদ করা
- একটি ডিজাইন সিস্টেমের স্পেসিং স্কেল বিভিন্ন ইউনিট জুড়ে সামঞ্জস্যপূর্ণভাবে মিলছে কিনা তা অডিট করা
- কোড রিভিউয়ের সময় ডেভ টুলস না খুলেই দ্রুত একটি CSS মান যাচাই করা
প্রধান সুবিধাসমূহ
- একই জায়গায় সব ৭টি সাধারণ CSS ইউনিটের মধ্যে রূপান্তর করে
- একটি নির্দিষ্ট অনুমানের পরিবর্তে আপনার প্রকৃত বেস ফন্ট সাইজ ও ভিউপোর্ট ব্যবহার করে
- আপনি টাইপ করার সাথে সাথে তাৎক্ষণিক ফলাফল — ব্রাউজার ডেভ টুলস খোলার দরকার নেই
- বিনামূল্যে, সাইন-আপের প্রয়োজন নেই, সম্পূর্ণভাবে আপনার ব্রাউজারে চলে
প্রো টিপস
- নেস্টেড কম্পোনেন্টে অপ্রত্যাশিত সঞ্চয়ন এড়াতে ফন্ট সাইজের জন্য em-এর চেয়ে rem-কে অগ্রাধিকার দিন
- আপনার লক্ষ্য ব্রাউজারগুলো সমর্থন করলে মোবাইল ফুল-স্ক্রিন লেআউটের জন্য vh-এর পরিবর্তে dvh/svh ব্যবহার করুন
- rem রূপান্তরগুলো পূর্বাভাসযোগ্য রাখতে আপনার ডিজাইন সিস্টেম জুড়ে একটি সামঞ্জস্যপূর্ণ বেস ফন্ট সাইজ বজায় রাখুন
- একটি পিক্সেল-নির্ভুল ডিজাইন অনুবাদ করার সময়, স্পেসিং rem-এ রূপান্তর করুন কিন্তু বর্ডার-প্রস্থ ও অন্যান্য সূক্ষ্ম বিবরণ px-এ রাখুন
এড়ানোর সাধারণ ভুলসমূহ
- রুট ফন্ট সাইজ পরিবর্তন করা হয়েছে কিনা তা পরীক্ষা না করেই ধরে নেওয়া যে 1rem সবসময় 16px-এর সমান
- ব্রাউজারের অ্যাড্রেস বারের আচরণ বিবেচনা না করে মোবাইল ফুল-হাইট লেআউটের জন্য vh ব্যবহার করা
- em-ভিত্তিক ফন্ট সাইজ নেস্ট করা এবং সেগুলো অপ্রত্যাশিতভাবে সঞ্চিত হলে অবাক হওয়া
- একই কম্পোনেন্টের মধ্যে px ও rem অসামঞ্জস্যপূর্ণভাবে মিশ্রিত করা, যা অ্যাক্সেসিবিলিটি স্কেলিং নষ্ট করে
মূল শব্দ ব্যাখ্যা
- রুট ফন্ট সাইজ: html এলিমেন্টে সেট করা font-size, যার সাপেক্ষে সমস্ত rem ইউনিট হিসাব করা হয়
- ভিউপোর্ট (Viewport): ব্রাউজার উইন্ডোতে একটি ওয়েব পৃষ্ঠার দৃশ্যমান এলাকা
- অ্যাবসোলিউট ইউনিট (Absolute unit): px বা pt-এর মতো একটি ইউনিট যার একটি নির্দিষ্ট বাস্তব আকার আছে, কোনো প্রেক্ষাপটের সাপেক্ষে নয়
- রিলেটিভ ইউনিট (Relative unit): rem, em, vw বা %-এর মতো একটি ইউনিট যার আকার অন্য একটি মানের উপর নির্ভরশীল
সম্পর্কিত ধারণা
- রঙ কনভার্টার: HEX, RGB এবং HSL রঙের ফরম্যাটের মধ্যে রূপান্তর করুন
- দৈর্ঘ্য কনভার্টার: ইঞ্চি, সেন্টিমিটার, পিক্সেল এবং আরও অনেক কিছুর মধ্যে রূপান্তর করুন
- ইউনিট কনভার্টার: বিভিন্ন পরিমাপ ইউনিটের মধ্যে রূপান্তর করুন
- অ্যাসপেক্ট রেশিও ক্যালকুলেটর: অ্যাসপেক্ট রেশিও গণনা এবং রূপান্তর করুন
- ডেটা কনভার্টার: বাইট, KB, MB, GB এবং TB-এর মধ্যে রূপান্তর করুন
উদাহরণ
16px বেস ফন্ট সাইজে, 1.5rem 24px-এ রূপান্তরিত হয়। 1440px ভিউপোর্ট প্রস্থে, 5vw 72px-এ রূপান্তরিত হয়।
আপনার ফলাফলের ব্যাখ্যা
এই টুলটি আপনার ইনপুটের ভিত্তিতে বিস্তারিত ফলাফল দেখায়। সংখ্যাগুলো কীভাবে ব্যাখ্যা করবেন এবং সেগুলো থেকে কীভাবে সিদ্ধান্ত নেবেন তা বুঝতে প্রতিটি অংশ মনোযোগ সহকারে দেখুন।
টুলটি কীভাবে কাজ করে বা নির্দিষ্ট কোনো ফলাফল কীভাবে ব্যাখ্যা করবেন সে বিষয়ে প্রশ্ন থাকলে, নিচের প্রশ্নোত্তর (FAQ) বিভাগটি দেখুন অথবা সাপোর্ট টিমের সাথে যোগাযোগ করুন।