CSS UNITS

on

  1. PX: PX(pixel) হলো fixed অর্থাৎ এটি responsive না। তাই যে কোন ক্ষেত্রবিশেষ যেখানে Size Fixed  রাখতে হবে, সেই সব জায়গায় এটি ব্যবহার করা ভালো। যেমনঃ boders, radius etc.

  2. Em:  em সবসময় তার parent element এর উপর ভিত্তি করে কাজ করে। অর্থাৎ, parent element এক যদি 26px দেওয়া থাকে এবং পরবর্তী element এ যদি 2em দেওয়া হয় তবে parent element এর দ্বিগুণ বুঝাবে। এভাবে যত em দেওয়া হবে, parent element এর তত গুন বুঝাবে।

  3. Rem: rem এই unit ব্যবহার করলে এটি browser এর font size এর উপর depend করে কাজ করবে। অর্থাৎ, এটির parent হিসেবে browser এর size থাকবে। যদি browser এর font size হয় 16px হয় তবে 3rem হবে (16x3) = 48px। যেহুতু এটি user এর broser এর font size এর ভিত্তি করে কাজ করে। তাই responsive করার জন্য এতি ব্যবহার করাই সবচেয়ে ভাল হবে বেশিরভাগ ক্ষেত্রে।

NOTE: যদি px থেকে rem এ convert করেতে হয় হবে ঐ px কে 16 দ্বারা ভাগ  করতে হবে।

  1. Vh: viewport height(vh) এটি দ্বারা বুঝায় যে কোন ডিভাইস এর screen size এর height। যদি vh এর মান 80vh দেওয়া হয় তবে একটি ডিভাইস এর screen এ একবারে যে টুকু দেখা যায় সেই সম্পূর্ণ জায়গার 80%। সেটা যেকোন ডিভাইস হতে পারে। যেমনঃ laptop, mobile, tv etc.

  2. Vw: viewport width(vw) এটি vh এর মতোই কাজ করে তবে width এর জন্য।

Percentage(%): Percentage কাজ করে তার parent element এর সাইজ এর উপর ভিত্তি করে। যদি parent element এর size 500px হয় এবং তার child element এ যদি 50% বলা হয় তবে তা 500px এর 50% অর্থাৎ, 250px বুঝাবে ও সেই অনুযায়ী কাজ করবে।