CSS ইউনিটগুলি absolute (নির্দিষ্ট) এবং relative (কিছুর সাথে স্কেল করে) এ বিভক্ত। সঠিক পছন্দ responsive এবং accessible লেআউটের জন্য গুরুত্বপূর্ণ।
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
যেসব জিনিস স্কেল করা উচিত নয় তার জন্য ব্যবহার করুন (borders, ছোট নির্দিষ্ট বিবরণ)।
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em compounds nesting এর মাধ্যমে (একটি child-এর child গুণ বাড়ায়), যা অপ্রত্যাশিতভাবে বৃদ্ধি পেতে পারে। rem সর্বদা root কে রেফার করে, তাই এটি predictable — font sizes এবং spacing এর জন্য প্রথম পছন্দ। em ব্যবহার করুন যখন আপনি চান sizing local font এর সাপেক্ষে (যেমন একটি button এর padding যা তার text এর সাথে স্কেল করে)।
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Type এর জন্য rem ব্যবহার করা user দের respects করে যারা বড় default font সেট করেছে — একটি বাস্তব accessibility জয় যা px ভেঙে দেয়।
সঠিক ইউনিট লেআউটগুলিকে responsive এবং accessible করে তোলে: rem type/spacing এর জন্য (predictable + user settings কে respects করে), %/vw/vh fluid layout এর জন্য, px নির্দিষ্ট বিবরণের জন্য, এবং em locally-relative sizing এর জন্য।
নতুন viewport units (dvh, svh) mobile address-bar height সমস্যা ও ঠিক করে।