CSS ইউনিট কনভার্টার

আপনার নিজের বেস ফন্ট সাইজ ও ভিউপোর্ট মাত্রা ব্যবহার করে তাৎক্ষণিকভাবে px, rem, em, pt, vw, vh এবং %-এর মধ্যে রূপান্তর করুন — 1.5rem আসলে পিক্সেলে কত তা আর অনুমান করার দরকার নেই।

এই ক্যালকুলেটরটি কি আপনাকে সাহায্য করেছে?

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 বা %-এর মতো একটি ইউনিট যার আকার অন্য একটি মানের উপর নির্ভরশীল

উদাহরণ

16px বেস ফন্ট সাইজে, 1.5rem 24px-এ রূপান্তরিত হয়। 1440px ভিউপোর্ট প্রস্থে, 5vw 72px-এ রূপান্তরিত হয়।

আপনার ফলাফলের ব্যাখ্যা

এই টুলটি আপনার ইনপুটের ভিত্তিতে বিস্তারিত ফলাফল দেখায়। সংখ্যাগুলো কীভাবে ব্যাখ্যা করবেন এবং সেগুলো থেকে কীভাবে সিদ্ধান্ত নেবেন তা বুঝতে প্রতিটি অংশ মনোযোগ সহকারে দেখুন। টুলটি কীভাবে কাজ করে বা নির্দিষ্ট কোনো ফলাফল কীভাবে ব্যাখ্যা করবেন সে বিষয়ে প্রশ্ন থাকলে, নিচের প্রশ্নোত্তর (FAQ) বিভাগটি দেখুন অথবা সাপোর্ট টিমের সাথে যোগাযোগ করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

rem এবং em-এর মধ্যে পার্থক্য কী?

rem সবসময় রুট (html) এলিমেন্টের ফন্ট সাইজের সাপেক্ষে হিসাব হয়, তাই একটি এলিমেন্ট যত গভীরে নেস্টেড থাকুক না কেন এটি সামঞ্জস্যপূর্ণ থাকে। em বর্তমান এলিমেন্টের নিজস্ব ফন্ট সাইজের সাপেক্ষে হিসাব হয়, যার অর্থ নেস্ট করা হলে এটি সঞ্চিত (compound) হতে পারে — সরলতার জন্য এই টুলটি আপনার বেস ফন্ট সাইজ ব্যবহার করে উভয়কেই একইভাবে বিবেচনা করে।

1rem সাধারণত 16px-এর সমান কেন?

16px হলো প্রায় প্রতিটি ব্রাউজারে রুট html এলিমেন্টের জন্য ডিফল্ট ব্রাউজার ফন্ট সাইজ। যেহেতু rem সেই রুট সাইজের সাপেক্ষে হিসাব হয়, তাই 1rem 16px-এর সমান হয়, যদি না পৃষ্ঠা (বা ব্যবহারকারীর ব্রাউজার সেটিংস) স্পষ্টভাবে রুট ফন্ট সাইজ পরিবর্তন করে।

vw এবং vh কীসের জন্য ব্যবহৃত হয়?

vw (ভিউপোর্ট প্রস্থ) এবং vh (ভিউপোর্ট উচ্চতা) হলো ব্রাউজার উইন্ডোর বর্তমান প্রস্থ ও উচ্চতার শতাংশ — 1vw ভিউপোর্ট প্রস্থের 1%-এর সমান। এগুলো সাধারণত ফুল-স্ক্রিন লেআউট এবং স্ক্রিনের সাথে স্কেল হওয়া রেসপনসিভ টাইপোগ্রাফির জন্য ব্যবহৃত হয়।

একটি পিক্সেল কি সবসময় ঠিক 1/96 ইঞ্চির সমান?

CSS স্পেসিফিকেশন অনুযায়ী, হ্যাঁ — একটি CSS পিক্সেলকে 1/96 ইঞ্চি হিসেবে সংজ্ঞায়িত করা হয়, যে কারণে 1pt (1/72 ইঞ্চি) ঠিক 96/72 = 1.333 CSS পিক্সেলে রূপান্তরিত হয়।

এই টুলটি কি বিনামূল্যে?

হ্যাঁ, এই টুলটি সম্পূর্ণ বিনামূল্যে এবং এর জন্য কোনো সাইন আপের প্রয়োজন নেই। আপনি এটি স্বাধীনভাবে ব্যবহার করতে পারেন।

ডেটা কি নিরাপদ?

হ্যাঁ, সমস্ত হিসাব-নিকাশ আপনার ব্রাউজারেই সম্পন্ন হয়। কোনো ডেটা আমাদের সার্ভারে পাঠানো হয় না।

আমি কি এই টুলটি আমার মোবাইলে ব্যবহার করতে পারি?

হ্যাঁ, এই টুলটি স্মার্টফোন ও ট্যাবলেট সহ সব ধরনের ডিভাইসের সাথে সামঞ্জস্যপূর্ণ।

আমি কীভাবে আমার ফলাফল সংরক্ষণ করব?

এই ফিচারটি উপলব্ধ থাকলে আপনি ফলাফল কপি করতে পারেন অথবা PDF বা CSV ফাইল হিসেবে এক্সপোর্ট করতে পারেন।

ফলাফল কি নির্ভুল?

ফলাফলগুলো প্রতিষ্ঠিত সূত্র ও সমীকরণের ভিত্তিতে তৈরি করা হয়। সর্বোচ্চ নির্ভুলতার জন্য আপনার ইনপুট মানগুলো যাচাই করে নিন।

আমি কি এই টুলটি অফলাইনে ব্যবহার করতে পারি?

হ্যাঁ, বেশিরভাগ হিসাব-নিকাশ আপনার ব্রাউজারে স্থানীয়ভাবেই হয় এবং এর জন্য ইন্টারনেট সংযোগের প্রয়োজন হয় না।

টুলে কোনো সমস্যা দেখা দিলে আমি কীভাবে তা সমাধান করব?

নিশ্চিত করুন যে আপনি ব্রাউজারের সর্বশেষ সংস্করণ ব্যবহার করছেন এবং প্রয়োজনে ক্যাশে মুছে ফেলুন। সমস্যা থেকেই গেলে সাপোর্ট টিমের সাথে যোগাযোগ করুন।

CSS ইউনিট কনভার্টার

মান

যে ইউনিট থেকে

বেস ফন্ট সাইজ (px)

শতাংশের ভিত্তি (px)

ভিউপোর্ট প্রস্থ (px)

ভিউপোর্ট উচ্চতা (px)

rem

1.1111

1.7778

100

এই ক্যালকুলেটরটি কি আপনাকে সাহায্য করেছে?