CSS ইউনিট কনভার্টার
যেকোনো CSS দৈর্ঘ্যকে px, rem, em, %, pt, pc, in, cm, mm এবং Q-এর মধ্যে একসাথে রূপান্তর করুন। সঠিক rem, em ও শতাংশ ফলাফলের জন্য আপনার রুট এবং এলিমেন্ট font-size সেট করুন। সবকিছু আপনার ব্রাউজারে চলে; কিছুই আপলোড হয় না।
| ইউনিট | মান | কপি |
|---|---|---|
px পিক্সেল | 16px | |
rem রুট em | 1rem | |
em em | 1em | |
% শতাংশ | 100% | |
pt পয়েন্ট | 12pt | |
pc পাইকা | 1pc | |
in ইঞ্চি | 0.166667in | |
cm সেন্টিমিটার | 0.423333cm | |
mm মিলিমিটার | 4.233333mm | |
Q কোয়ার্টার-mm | 16.933333Q |
কনভার্টার কীভাবে কাজ করে
কোনো মান টাইপ করুন এবং যে ইউনিট থেকে আপনি রূপান্তর করছেন (from) সেটি বেছে নিন। টুল এটিকে
একসাথে অন্য প্রতিটি CSS দৈর্ঘ্য ইউনিটে রূপান্তর করে এবং প্রতিটি ফলাফল টেবিলে কপির জন্য প্রস্তুত অবস্থায়
দেখায়। যেহেতু rem, em ও % কোনো নির্দিষ্ট ভৌত দৈর্ঘ্যের বদলে কোনো
font-size-এর সাপেক্ষে হয়, দুটি সেটিং এগুলো নিয়ন্ত্রণ করে: রুট font-size
(rem-এর জন্য) এবং এলিমেন্ট font-size (em ও %-এর
জন্য)। দুটোই ব্রাউজার স্ট্যান্ডার্ড 16px-এ ডিফল্ট থাকে, তাই কোনো পরিবর্তন ছাড়াই
16px = 1rem = 1em = 100% = 12pt = 1pc। যেকোনো বাক্স আপনার নিজের CSS-এর সাথে মেলাতে বদলান
এবং প্রতিটি প্রভাবিত ফলাফল তৎক্ষণাৎ আপডেট হয়।
px থেকে rem, em, pt এবং % — সাধারণ মান
ডিফল্ট 16px রুট/এলিমেন্ট font-size-এ গণনা করা:
| px | rem | em | pt | % |
|---|---|---|---|---|
8px | 0.5rem | 0.5em | 6pt | 50% |
10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
12px | 0.75rem | 0.75em | 9pt | 75% |
14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
16px | 1rem | 1em | 12pt | 100% |
18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
20px | 1.25rem | 1.25em | 15pt | 125% |
24px | 1.5rem | 1.5em | 18pt | 150% |
28px | 1.75rem | 1.75em | 21pt | 175% |
32px | 2rem | 2em | 24pt | 200% |
40px | 2.5rem | 2.5em | 30pt | 250% |
48px | 3rem | 3em | 36pt | 300% |
64px | 4rem | 4em | 48pt | 400% |
CSS দৈর্ঘ্য ইউনিটের ব্যাখ্যা
| ইউনিট | ধরন | সংজ্ঞা |
|---|---|---|
px | পরম (রেফারেন্স পিক্সেল) | মূল CSS ইউনিট। স্ট্যান্ডার্ড 96-DPI ডিসপ্লেতে 1px = ইঞ্চির 1/96, এবং এটি font-size-এর সাথে স্কেল করে না। |
rem | ফন্ট-সাপেক্ষ | "রুট em" — রুট (<html>) font-size-এর সাপেক্ষে। 1rem = রুট font-size, ডিফল্টভাবে 16px। স্কেলযোগ্য, সুলভ (accessible) সাইজিংয়ের জন্য পছন্দের ইউনিট। |
em | ফন্ট-সাপেক্ষ | বর্তমান এলিমেন্টের নিজস্ব font-size-এর সাপেক্ষে। 1em = সেই এলিমেন্টের font-size, তাই নেস্টেড em মান যৌগিক (compound) হয়। |
% | সাপেক্ষ | font-size-এর জন্য, প্যারেন্ট এলিমেন্টের font-size-এর একটি শতাংশ। 100% প্যারেন্ট font-size (ডিফল্টভাবে 16px)-এর সমান। |
pt | পরম (প্রিন্ট) | পয়েন্ট, প্রিন্ট টাইপোগ্রাফি থেকে। 1pt = 1/72 ইঞ্চি = 4/3 px, তাই 12pt = 16px। এটি প্রিন্ট স্টাইলশিটের জন্যই রাখা সবচেয়ে ভালো। |
pc | পরম (প্রিন্ট) | পাইকা। 1pc = 12pt = 16px। |
in | পরম (ভৌত) | ইঞ্চি। 1in = 96px = 2.54cm। ভৌত ইউনিটগুলো মূলত প্রিন্টের জন্য। |
cm | পরম (ভৌত) | সেন্টিমিটার। 1cm = 96/2.54 ≈ 37.8px। |
mm | পরম (ভৌত) | মিলিমিটার। 1mm = 1/10 cm ≈ 3.78px। |
Q | পরম (ভৌত) | কোয়ার্টার-মিলিমিটার। 1Q = 1/40 cm ≈ 0.945px। ফাইন প্রিন্ট মেট্রিক্সের বাইরে খুব কমই ব্যবহৃত হয়। |
দ্রুত উপায়: px ↔ rem
ডিফল্ট 16px রুট font-size-এর সাথে, rem = px ÷ 16 এবং
px = rem × 16। তাই 24px হলো 1.5rem, 32px হলো 2rem, এবং 0.5rem হলো 8px। একটি জনপ্রিয়
শর্টকাট হলো html { font-size: 62.5% } সেট করা, যা রুটকে 10px করে দেয় — তখন
rem = px ÷ 10 এবং সংখ্যাগুলো সহজে পড়ার মতো হয়ে যায় (18px = 1.8rem)। সেই স্কেলে কাজ করতে
উপরে “রুট font-size” বাক্সে 10 দিন।
আমার কোন ইউনিট ব্যবহার করা উচিত?
- rem — font-size, স্পেসিং ও লেআউটের জন্য ডিফল্ট পছন্দ। এটি ব্যবহারকারীর ব্রাউজার font-size সেটিংয়ের সাথে স্কেল করে, যা সুলভতা (accessibility)-এর জন্য গুরুত্বপূর্ণ, আবার পুরো-পেজে অনুমানযোগ্য থাকে।
- em — যখন আপনি চান কোনো মান তার স্থানীয় এলিমেন্টের সাথে স্কেল করুক, যেমন প্যাডিং যা কোনো কম্পোনেন্টের নিজস্ব font-size-এর সাথে বাড়ে। নেস্ট হলে যৌগিকতা (compounding)-এর দিকে খেয়াল রাখুন।
- px — সূক্ষ্ম বর্ডার, নির্দিষ্ট আইকন সাইজ এবং যেখানেই আপনার একটি নির্ভুল, না-স্কেল-হওয়া দৈর্ঘ্য প্রয়োজন।
- % — তরল (fluid) প্রস্থ এবং কোনো প্যারেন্টকে অনুসরণ করা font-size-এর জন্য।
- pt / pc / in / cm / mm / Q —
@media printস্টাইলশিটের জন্য রাখুন, যেখানে একটি আসল ভৌত আউটপুট আকার থাকে।
গোপনীয়তা
এই কনভার্টার বিশুদ্ধ ক্লায়েন্ট-সাইড পাটিগণিত — আপনি যে মানগুলো দেন সেগুলো কখনো আপনার ডিভাইস থেকে বাইরে যায় না, কিছুই লগ হয় না এবং কোনো নেটওয়ার্ক অনুরোধ হয় না। একবার লোড হয়ে গেলে এটি অফলাইনেও কাজ করতে থাকে।
প্রায়ই জিজ্ঞাসিত প্রশ্ন
- px কে rem-এ কীভাবে রূপান্তর করব?
- পিক্সেল মানকে রুট font-size দিয়ে ভাগ করুন। ব্রাউজারের ডিফল্ট রুট font-size 16px-এর সাথে, rem = px ÷ 16 — তাই 24px = 1.5rem, 32px = 2rem এবং 12px = 0.75rem। যদি আপনার CSS <html> এলিমেন্টে ভিন্ন কোনো রুট font-size সেট করে (একটি প্রচলিত কৌশল হলো 62.5%, যা রুটকে 10px করে দেয় যাতে 1rem = 10px হয় এবং হিসাব "px ÷ 10" হয়ে যায়), তাহলে সেই মানটি "রুট font-size" বাক্সে দিন এবং টুল প্রতিটি rem আপনার জন্য পুনরায় গণনা করে দেবে।
- em এবং rem-এর মধ্যে পার্থক্য কী?
- দুটোই ফন্ট-সাপেক্ষ, কিন্তু এগুলো ভিন্ন ভিন্ন জিনিসের সাপেক্ষে মাপে। rem সবসময় রুট (<html>) font-size-এর সাপেক্ষে, তাই 1rem পুরো পেজে সর্বত্র একই দৈর্ঘ্যের হয়। em বর্তমান এলিমেন্টের নিজস্ব font-size-এর সাপেক্ষে, তাই 1em কোথায় ব্যবহৃত হয়েছে তার উপর নির্ভর করে বদলায়, এবং নেস্টেড em মান যৌগিক হয় (1.2em থাকা একটি এলিমেন্ট, 1.2em থাকা প্যারেন্টের ভেতরে, গ্র্যান্ডপ্যারেন্ট সাইজের 1.44 × রেন্ডার হয়)। যখন আপনি অনুমানযোগ্য, পুরো-পেজ সাইজিং চান তখন rem ব্যবহার করুন, আর যখন চান কোনো মান তার স্থানীয় প্রসঙ্গের সাথে স্কেল করুক তখন em। এই টুল আপনাকে রুট font-size (rem-এর জন্য) এবং এলিমেন্ট font-size (em ও %-এর জন্য) আলাদাভাবে সেট করতে দেয়।
- em এবং % কেন আলাদা একটি font-size চায়?
- কারণ এগুলো রুটের নয়, এলিমেন্টের সাপেক্ষে। 1em এবং 100% দুটোই সেই এলিমেন্টের font-size-এর সমান যেটির উপর মানটি প্রয়োগ করা হয়েছে (বা ইনহেরিট করা প্রপার্টির ক্ষেত্রে তার প্যারেন্টের), যা অগত্যা রুট font-size নাও হতে পারে। যদি আপনি "এলিমেন্ট font-size" 16px-এ রেখে দেন তবে ডিফল্ট আচরণ পাবেন; আপনি যে এলিমেন্ট স্টাইল করছেন তার সাথে এটি মেলান — ধরুন 20px — তখন 1.5em সঠিকভাবে 30px এবং 50% 10px দেখায়।
- 12pt কত পিক্সেল?
- ঠিক 16px। একটি পয়েন্ট (pt) কে ইঞ্চির 1/72 হিসেবে সংজ্ঞায়িত করা হয়েছে এবং CSS 1 ইঞ্চিকে 96px ধরে, তাই 1pt = 96/72 = 4/3 px ≈ 1.333px, এবং 12pt = 16px। এই কারণেই 12pt, 16px, 1rem, 1pc এবং 100% সবই একই ডিফল্ট টেক্সট সাইজ বোঝায়। পয়েন্ট প্রিন্ট টাইপোগ্রাফি থেকে আসে এবং এগুলো প্রিন্ট স্টাইলশিট পর্যন্তই সীমাবদ্ধ রাখা সবচেয়ে ভালো; স্ক্রিনের জন্য px বা rem ব্যবহার করুন।
- ভৌত ইউনিট (in, cm, mm) কি স্ক্রিনে নির্ভুল?
- CSS এগুলোকে রেফারেন্স পিক্সেলের নির্দিষ্ট অনুপাত হিসেবে ধরে — 1in = 96px, 1cm ≈ 37.8px, 1mm ≈ 3.78px — প্রকৃত ডিসপ্লের ভৌত আকার বা রেজোলিউশন যাই হোক না কেন। তাই CSS-এ "1cm" কেবল একটি সাধারণ 96-DPI স্ক্রিনেই সত্যিকারের এক সেন্টিমিটার হয়; কোনো ফোন বা 4K মনিটরে এটি রুলার দিয়ে মাপলে আসল সেন্টিমিটার হবে না। এজন্যই ভৌত ইউনিট কেবল প্রিন্ট স্টাইলশিটের জন্যই সুপারিশ করা হয়, যেখানে আউটপুট মাধ্যমের একটি আসল ভৌত আকার থাকে।
- কিছু কি আপলোড বা সেভ হয়?
- না। পুরো কনভার্টার আপনার ব্রাউজারে সাধারণ JavaScript এবং সরল পাটিগণিত দিয়ে চলে — কোনো নেটওয়ার্ক অনুরোধ হয় না, কিছুই আপলোড হয় না এবং কিছুই সংরক্ষণ হয় না। পেজ একবার লোড হয়ে গেলে আপনি এটি অফলাইনে ব্যবহার করতে পারেন।