পিএক্স বনাম ইএম বনাম রেম: আপনার কোন সিএসএস ইউনিট ব্যবহার করা উচিত?

ওয়েব পেজ তৈরি করার সময় আপনি পাঠ্যের ফন্ট-আকার কাস্টমাইজ করার জন্য কয়েকটি CSS ইউনিট শিখতে যাচ্ছেন। অনেক ইউনিট আছে যেমন pt, pc, ex, ইত্যাদি, কিন্তু বেশিরভাগ ক্ষেত্রে আপনার তিনটি জনপ্রিয় ইউনিটের উপর ফোকাস করা উচিত: px, em, এবং rem। অনেক বিকাশকারী সাধারণত এই ইউনিটগুলির মধ্যে পার্থক্যগুলি বুঝতে পারে না; সুতরাং, নীচে এই ইউনিটগুলির একটি বিশদ ব্যাখ্যা রয়েছে।

দিনের মেকইউজের ভিডিও

এগিয়ে যাওয়ার আগে, নোট করুন যে দুটি ধরণের ইউনিট দৈর্ঘ্য রয়েছে: পরম এবং আপেক্ষিক .

---

---

পরম দৈর্ঘ্য

নিখুঁত দৈর্ঘ্যের এককগুলি স্থির করা হয়েছে, এবং এইগুলির যে কোনও একটিতে প্রকাশিত একটি দৈর্ঘ্য ঠিক সেই আকার হিসাবে প্রদর্শিত হবে।

পরম দৈর্ঘ্যের ইউনিটগুলি স্ক্রিনে ব্যবহারের জন্য সুপারিশ করা হয় না, কারণ পর্দার আকার অনেক পরিবর্তিত হয়। যাইহোক, আউটপুট মাধ্যম পরিচিত হলে সেগুলি ব্যবহার করা যেতে পারে, যেমন একটি মুদ্রিত বিন্যাসের জন্য।

ইউনিট	বর্ণনা
সেমি	সেন্টিমিটার
মিমি	মিলিমিটার
ভিতরে	ইঞ্চি (1in = 96px = 2.54cm)
px *	পিক্সেল (1px = 1/96 তম 1in)
pt	পয়েন্ট (1pt = 1/72 এর 1in)
পিসি	কোদাল (1pc = 12pt)

আপেক্ষিক দৈর্ঘ্য

আপেক্ষিক দৈর্ঘ্য একক অন্য দৈর্ঘ্য বৈশিষ্ট্যের সাথে সম্পর্কিত একটি দৈর্ঘ্য নির্দিষ্ট করে। আপেক্ষিক দৈর্ঘ্যের ইউনিটগুলি বিভিন্ন রেন্ডারিং মাধ্যমের মধ্যে ভাল স্কেল করে।

ইউনিট	সম্পর্কিত
ভিতরে*	উপাদানটির ফন্ট-আকারের সাথে সম্পর্কিত (2em মানে বর্তমান ফন্টের আকারের 2 গুণ)
প্রাক্তন	বর্তমান ফন্টের x-উচ্চতার সাথে সম্পর্কিত (কদাচিৎ ব্যবহৃত)
সিএইচ	'0' (শূন্য) এর প্রস্থের সাথে আপেক্ষিক
রেম*	রুট এলিমেন্টের ফন্ট-আকারের সাথে সম্পর্কিত
vw	ভিউপোর্টের প্রস্থের 1% এর সাথে আপেক্ষিক*
vh	ভিউপোর্টের উচ্চতার 1% এর আপেক্ষিক*
মিনিট	ভিউপোর্টের * ছোট মাত্রার 1% এর সাথে আপেক্ষিক
vmax	ভিউপোর্টের * বৃহত্তর মাত্রার 1% এর সাথে আপেক্ষিক
%	অভিভাবক উপাদান আপেক্ষিক

1. Px (পিক্সেল)

পিক্সেল সম্ভবত CSS-এ সবচেয়ে বেশি ব্যবহৃত একক এবং ওয়েবপৃষ্ঠাগুলিতে পাঠ্যের ফন্ট-আকার সেট করার ক্ষেত্রে এটি খুব জনপ্রিয়। এক পিক্সেল (1px) কে প্রিন্ট মিডিয়াতে এক ইঞ্চির 1/96 তম হিসাবে সংজ্ঞায়িত করা হয়।

কম্পিউটার স্ক্রিনে যাইহোক, এগুলি সাধারণত সেন্টিমিটার এবং ইঞ্চির মতো প্রকৃত পরিমাপের সাথে সম্পর্কিত নয় যেমন আপনি ভাবতে পারেন; তারা শুধু ছোট কিন্তু দৃশ্যমান হতে সংজ্ঞায়িত করা হয়. যা দৃশ্যমান বলে মনে করা হয় তা ডিভাইসের উপর নির্ভরশীল।

---

---

বিভিন্ন ডিভাইসের স্ক্রীনে প্রতি ইঞ্চিতে পিক্সেলের একটি ভিন্ন সংখ্যক থাকে, যা পিক্সেল ঘনত্ব নামে পরিচিত। আপনি যদি সেই ডিভাইসে সামগ্রীর আকার নির্ধারণ করতে একটি ডিভাইসের স্ক্রিনে শারীরিক পিক্সেলের সংখ্যা ব্যবহার করেন, তাহলে সমস্ত আকারের স্ক্রীন জুড়ে জিনিসগুলিকে একই দেখাতে আপনার সমস্যা হবে৷

সেখানেই ডিভাইসের পিক্সেল অনুপাত আসে। এটি মূলত একটি CSS পিক্সেল (1px) ডিভাইসের স্ক্রিনে কতটা জায়গা নেবে তা গণনা করার একটি উপায় যা অন্য ডিভাইসের তুলনায় এটিকে একই আকার দেখাতে সক্ষম করবে।

---

---

নীচে একটি উদাহরণ:-

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

আউটপুট

উপরের বক্সটি ল্যাপটপের মতো বড় স্ক্রিনে প্রদর্শিত হলে এটি কেমন দেখায় এবং নীচের বাক্সটি দেখতে কেমন হয় যখন একটি ফোনের মতো ছোট স্ক্রিনে প্রদর্শিত হয় .

লক্ষ্য করুন কিভাবে উভয় বাক্সের টেক্সট একই আকারের হয়, পিক্সেল মূলত কিভাবে কাজ করে। এটি ওয়েব সামগ্রী (শুধু পাঠ্য নয়) ডিভাইস জুড়ে একই আকার দেখতে সহায়তা করে৷

2. আমি (এম)

বেশিরভাগ CSS ইউনিট টাইপোগ্রাফি থেকে আসায় em ইউনিটের নামটি বড় হাতের অক্ষর 'M' (em) থেকে এসেছে। এটি মূল উপাদানটির বর্তমান ফন্ট-আকারকে তার ভিত্তি হিসাবে ব্যবহার করে। এটি পিতামাতার কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত ফন্ট-আকারের উপর ভিত্তি করে একটি উপাদানের ফন্ট-আকার স্কেল বা স্কেল করতে ব্যবহার করা যেতে পারে।

ধরা যাক আপনার একটি প্যারেন্ট ডিভ আছে যার ফন্ট সাইজ 16px। আপনি যদি সেই ডিভিতে একটি অনুচ্ছেদ উপাদান তৈরি করেন এবং এটিকে 1em এর একটি ফন্ট সাইজ দেন তাহলে অনুচ্ছেদের ফন্টের আকার 16px হবে।

যাইহোক, আপনি যদি অন্য একটি অনুচ্ছেদ দেন তাহলে 2em এর ফন্ট সাইজ হবে যা 32px-এ অনুবাদ করবে। নীচের উদাহরণ বিবেচনা করুন:

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div> 

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

আউটপুট

আপনি দেখতে পাচ্ছেন কিভাবে em টেক্সটের আকার বাড়াতে পারে এবং কিভাবে এটি প্যারেন্ট কন্টেনার থেকে উত্তরাধিকারসূত্রে পাওয়া বর্তমান ফন্টের আকার দ্বারা প্রভাবিত হয়। এম ব্যবহার করা ঠিক নয়, বিশেষত জটিল কাঠামোগত পৃষ্ঠাগুলির মধ্যে।

সঠিকভাবে ব্যবহার না করা হলে, আপনি স্কেলিং সমস্যায় পড়তে পারেন যেখানে DOM গাছের আকারের জটিল উত্তরাধিকারের উপর ভিত্তি করে উপাদানগুলি সঠিকভাবে মাপ করা যাবে না।

3. রেম (রুট এম)

Rem প্রায় em এর মতোই কাজ করে, কিন্তু প্রধান পার্থক্য হল যে rem শুধুমাত্র পৃষ্ঠার মূল উপাদানের ফন্ট-সাইজকে নির্দেশ করে, না অভিভাবকের ফন্ট-আকারের পরিবর্তে। রুট ফন্ট-আকার হল ডিফল্ট ফন্ট-আকার ব্যবহারকারীর দ্বারা তাদের ব্রাউজার সেটিংসে বা আপনার দ্বারা, বিকাশকারী দ্বারা নির্দিষ্ট করা হয়৷

একটি ওয়েব ব্রাউজারের ডিফল্ট ফন্ট সাইজ সাধারণত 16px হয় তাই 1rem হবে 16px এবং 2rem হবে 32px। যাইহোক, একটি ক্ষেত্রে যেখানে রুট ফন্ট-আকার পরিবর্তন করে 10px করা হয় উদাহরণস্বরূপ; 1rem হবে 10px এবং 2rem হবে 20px।

5 0 রেডিও পুলিশ স্ক্যানার অ্যান্ড্রয়েড

জিনিসগুলি পরিষ্কার করার জন্য এখানে একটি উদাহরণ রয়েছে:

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div> 

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
} 

আউটপুট

আপনি দেখতে পাচ্ছেন, REM ইউনিটগুলির সাথে সংজ্ঞায়িত অনুচ্ছেদগুলি আমাদের কন্টেইনারে ঘোষিত ফন্টের আকার দ্বারা সম্পূর্ণরূপে অনিশ্চিত এবং কঠোরভাবে রেন্ডার করা হয় রুট ফন্ট সাইজ HTML এলিমেন্ট সিলেক্টরে সংজ্ঞায়িত করা হয়েছে।

পিএক্স বনাম ইএম বনাম রেম: কোন ইউনিট সেরা?

নেস্টেড উপাদানগুলির একটি জটিল শ্রেণিবিন্যাস থাকার সম্ভাবনার কারণে Em সুপারিশ করা হয় না। REM সাধারণত PX এর বিপরীতে ব্রাউজার সেটিংসে নির্দিষ্ট করা নতুন ডিফল্ট/বেস ফন্ট সাইজ দিয়ে যথাযথভাবে স্কেল করা হয়। এটি ব্যাখ্যা করে যে কেন আপনার ওয়েব পৃষ্ঠাগুলিতে পাঠ্য বিষয়বস্তু নিয়ে কাজ করার সময় আপনার REM ব্যবহার করা উচিত। REM রেস জিতেছে। REM-এর সাহায্যে আপনার কন্টেন্টকে আরও ভাল স্টাইল করা এবং স্কেল করা আপনার সাইটে ফ্লেয়ার যোগ করে কারণ এটি ওয়েবসাইট নির্মাতাদের জন্য আদর্শ। আপনার বিষয়বস্তুর অন-পয়েন্ট পরিমাপ আপনার ওয়েবসাইটের চেহারা এবং অনুভূতি নির্দেশ করবে, তবে, আপনাকে সৃজনশীল হতে হবে।