সাইজিং ইউনিট

সিএসএস পডকাস্ট - 008: সাইজিং ইউনিট

ওয়েব একটি প্রতিক্রিয়াশীল মাধ্যম, কিন্তু কখনও কখনও আপনি সামগ্রিক ইন্টারফেসের গুণমান উন্নত করতে এর মাত্রা নিয়ন্ত্রণ করতে চান৷ এটির একটি ভাল উদাহরণ হল পঠনযোগ্যতা উন্নত করতে লাইনের দৈর্ঘ্য সীমিত করা। আপনি কিভাবে ওয়েবের মত একটি নমনীয় মাধ্যমে তা করবেন?

এই ক্ষেত্রে, আপনি একটি ch ইউনিট ব্যবহার করতে পারেন, যা তার গণনাকৃত আকারে রেন্ডার করা ফন্টে "0" অক্ষরের প্রস্থের সমান। এই ইউনিটটি আপনাকে পাঠ্যের আকারের জন্য ডিজাইন করা ইউনিটের সাথে পাঠ্যের প্রস্থকে সীমাবদ্ধ করতে দেয়, যা ফলস্বরূপ, সেই পাঠ্যের আকার নির্বিশেষে অনুমানযোগ্য নিয়ন্ত্রণের অনুমতি দেয়। ch ইউনিট হল মুষ্টিমেয় এককগুলির মধ্যে একটি যা এই উদাহরণের মতো নির্দিষ্ট প্রসঙ্গের জন্য সহায়ক।

সংখ্যা

সংখ্যাগুলি opacity , line-height এবং এমনকি rgb রঙিন চ্যানেল মানগুলির জন্যও ব্যবহৃত হয়। সংখ্যা এককহীন পূর্ণসংখ্যা (1, 2, 3, 100) এবং দশমিক (.1, .2, .3)।

সংখ্যার অর্থ তাদের প্রেক্ষাপটের উপর নির্ভর করে। উদাহরণস্বরূপ, line-height সংজ্ঞায়িত করার সময়, একটি সংখ্যা একটি অনুপাতের প্রতিনিধিত্ব করে যদি আপনি এটিকে সমর্থনকারী ইউনিট ছাড়াই সংজ্ঞায়িত করেন:

p {
  font-size: 24px;
  line-height: 1.5;
}

এই উদাহরণে, 1.5 হল p উপাদানের গণনাকৃত পিক্সেল ফন্টের আকারের 150% এর সমান। এর মানে হল যদি p এর font-size 24px হয়, তাহলে লাইনের উচ্চতা 36px হিসাবে গণনা করা হবে।

সংখ্যাগুলি নিম্নলিখিত জায়গায়ও ব্যবহার করা যেতে পারে:

• ফিল্টারগুলির জন্য মান নির্ধারণ করার সময়: filter: sepia(0.5) উপাদানটিতে একটি 50% সেপিয়া ফিল্টার প্রয়োগ করে।
• অস্বচ্ছতা সেট করার সময়: opacity: 0.5 একটি 50% অস্বচ্ছতা প্রয়োগ করে।
• রঙিন চ্যানেলে: rgb(50, 50, 50) , যেখানে মান 0-255 একটি রঙের মান সেট করার জন্য গ্রহণযোগ্য। রঙের পাঠ দেখুন ।
• একটি উপাদানকে রূপান্তর করতে: transform: scale(1.2) উপাদানটিকে তার প্রাথমিক আকারের 120% দ্বারা স্কেল করে।

শতাংশ

সিএসএসে শতাংশ ব্যবহার করার সময় আপনাকে জানতে হবে শতাংশ কীভাবে গণনা করা হয়। উদাহরণস্বরূপ, মূল উপাদানে উপলব্ধ প্রস্থের শতাংশ হিসাবে width গণনা করা হয়।

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

পূর্ববর্তী উদাহরণে, div p এর প্রস্থ হল 150px , ধরে নিলাম যে লেআউটটি ডিফল্ট box-sizing: content-box ।

আপনি যদি শতাংশ হিসাবে margin বা padding সেট করেন, তাহলে দিকনির্বিশেষে অভিভাবক উপাদানের প্রস্থের একটি অংশ হবে।

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

পূর্ববর্তী উদাহরণে, margin-top এবং padding-left উভয়ই 150px এ গণনা করবে।

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

আপনি যদি শতাংশ হিসাবে একটি transform মান সেট করেন তবে এটি রূপান্তর সেট সহ উপাদানের উপর ভিত্তি করে। এই উদাহরণে, p এর translateX মান 10% এবং width 50% । প্রথমে, প্রস্থটি কী হবে তা গণনা করুন: 150px কারণ এটি তার পিতামাতার প্রস্থের 50% । তারপর, 150px এর 10% নিন, যা হল 15px ।

মাত্রা এবং দৈর্ঘ্য

আপনি যদি একটি সংখ্যার সাথে একটি ইউনিট সংযুক্ত করেন তবে এটি একটি মাত্রা হয়ে যায়। উদাহরণস্বরূপ, 1rem একটি মাত্রা। এই প্রসঙ্গে, একটি সংখ্যার সাথে সংযুক্ত ইউনিটটিকে একটি মাত্রা টোকেন হিসাবে নির্দিষ্টকরণে উল্লেখ করা হয়। দৈর্ঘ্য হল মাত্রা যা দূরত্বকে নির্দেশ করে এবং সেগুলি হয় পরম বা আপেক্ষিক হতে পারে।

পরম দৈর্ঘ্য

সমস্ত নিখুঁত দৈর্ঘ্য একই বেসের বিরুদ্ধে সমাধান করে, সেগুলি আপনার CSS-এ যেখানেই ব্যবহার করা হোক না কেন সেগুলিকে অনুমানযোগ্য করে তোলে৷ উদাহরণস্বরূপ, যদি আপনি আপনার উপাদানের আকারের জন্য cm ব্যবহার করেন এবং তারপরে মুদ্রণ করেন, যদি আপনি এটিকে একটি শাসকের সাথে তুলনা করেন তবে এটি সঠিক হওয়া উচিত। মনে রাখবেন যে ফিজিক্যাল ইউনিট, যেমন cm এবং in , পিক্সেল আকারের তারতম্যের কারণে স্ক্রিনে সেই আকারগুলিতে নির্ভরযোগ্যভাবে প্রদর্শিত হবে না। প্রিন্ট স্টাইল শীটগুলির জন্য শারীরিক ইউনিটগুলি সর্বোত্তম ব্যবহার করা হয় যেখানে তারা আরও নির্ভরযোগ্য হবে।

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

আপনি যদি এই পৃষ্ঠাটি মুদ্রণ করেন, তাহলে div একটি 10x5cm কালো আয়তক্ষেত্র হিসাবে মুদ্রণ করবে। মনে রাখবেন, CSS শুধুমাত্র ডিজিটাল কন্টেন্টের জন্য নয়, প্রিন্ট কন্টেন্ট স্টাইল করার জন্যও ব্যবহৃত হয়। প্রিন্টের জন্য ডিজাইন করার সময় পরম দৈর্ঘ্য সত্যিই কাজে আসতে পারে।

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

একটি আপেক্ষিক দৈর্ঘ্য একটি ভিত্তি মানের বিপরীতে গণনা করা হয়, অনেকটা শতাংশের মতো। এই এবং শতাংশের মধ্যে পার্থক্য হল যে আপনি প্রাসঙ্গিক বেস আকারের উপর ভিত্তি করে আকার নির্ধারণ করতে পারেন, যেমন ডিফল্ট ফন্টের আকার বা উইন্ডোর মাত্রা। এর মানে হল যে CSS-এ ch মতো ইউনিট রয়েছে যা ভিত্তি হিসাবে ফন্টের আকারের মেট্রিক্স ব্যবহার করে এবং vw যা ভিউপোর্টের প্রস্থের উপর ভিত্তি করে (আপনার ব্রাউজার উইন্ডো)। আপেক্ষিক দৈর্ঘ্য তার প্রতিক্রিয়াশীল প্রকৃতির কারণে ওয়েবে বিশেষভাবে উপযোগী।

হরফ-আকার-আপেক্ষিক একক

সিএসএস সহায়ক ইউনিট সরবরাহ করে যা রেন্ডারড টাইপোগ্রাফির উপাদানগুলির আকারের সাথে সম্পর্কিত, যেমন পাঠ্যের আকার ( em ইউনিট) বা টাইপফেস অক্ষরগুলির প্রস্থ ( ch ইউনিট)।

ভিউপোর্ট-আপেক্ষিক ইউনিট

আপনি ভিউপোর্টের মাত্রা (ব্রাউজার উইন্ডো) আপেক্ষিক ভিত্তিতে ব্যবহার করতে পারেন। এই ইউনিটগুলি উপলব্ধ ভিউপোর্ট স্থানকে ভাগ করে।

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

এই উদাহরণে, div হবে ভিউপোর্টের প্রস্থের 10% কারণ 1vw হল ভিউপোর্টের প্রস্থের 1% । p উপাদানটির max-width 60ch যার অর্থ এটি গণনাকৃত ফন্ট এবং আকারে 60 "0" অক্ষরের প্রস্থ অতিক্রম করতে পারে না৷

বিকল্প ভিউপোর্ট-আপেক্ষিক ইউনিট

যতক্ষণ পর্যন্ত ভিউপোর্টের আকার পরিবর্তন না হয় ততক্ষণ পর্যন্ত ভিউপোর্ট-রিলেটিভ ইউনিটের মান একই থাকে। যাইহোক, মোবাইল ব্রাউজারগুলি সাধারণত ভিউপোর্টের গণনাকৃত আকার পরিবর্তন না করেই ছোট পর্দায় সম্ভাব্য সর্বাধিক সামগ্রী দেখানোর জন্য UI উপাদানগুলি দেখায় বা লুকিয়ে রাখে৷ দৃশ্যমান এলাকায় এই পরিবর্তনগুলির জন্য আপনি ভিউপোর্ট-রিলেটিভ ইউনিটের বিকল্প ব্যবহার করতে পারেন।

ধারক-আপেক্ষিক ইউনিট

আপনি একটি উপাদানের পাত্রের মাত্রা একটি আপেক্ষিক ভিত্তিতে ব্যবহার করতে পারেন। এই ইউনিটগুলি উপলব্ধ কন্টেইনার স্থানকে ভাগ করে। উপলব্ধ স্থানের উপর ভিত্তি করে ফন্টের আকার সেট করতে কন্টেইনার কোয়েরির ভিতরে এগুলি কার্যকর।

বিবিধ ইউনিট

কিছু অন্যান্য ইউনিট রয়েছে যা নির্দিষ্ট ধরণের মানগুলির সাথে মোকাবিলা করার জন্য নির্দিষ্ট করা হয়েছে।

কোণ একক

কালার মডিউলে , আমরা অ্যাঙ্গেল ইউনিট দেখেছি, যেগুলো ডিগ্রী মান নির্ধারণের জন্য সহায়ক, যেমন hsl এ hue। এগুলি রূপান্তর ফাংশনের মধ্যে উপাদানগুলি ঘোরানোর জন্যও কার্যকর।

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

deg অ্যাঙ্গেল ইউনিট ব্যবহার করে, আপনি একটি div 90° এর কেন্দ্র অক্ষে ঘোরাতে পারেন।

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

রেজোলিউশন ইউনিট

পূর্ববর্তী উদাহরণে min-resolution মান হল 192dpi । dpi এককটি প্রতি ইঞ্চিতে বিন্দু বোঝায়। এটির জন্য একটি দরকারী প্রেক্ষাপট হল খুব উচ্চ রেজোলিউশনের স্ক্রীন সনাক্ত করা, যেমন একটি মিডিয়া কোয়েরিতে রেটিনা প্রদর্শন এবং একটি উচ্চ রেজোলিউশন চিত্র পরিবেশন করা।

আপনার উপলব্ধি পরীক্ষা করুন

সাইজিং সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

সম্পদ

• CSS স্পেক মান এবং ইউনিট লেভেল 4
• MDN-এ সাইজিং এবং ইউনিট
• Ems সম্পর্কে সব
• শতাংশ ব্যাখ্যাকারী