ফ্লুইড স্কেলিং

এক নজরে

ফ্লুইড স্কেলিংয়ের মাধ্যমে কম্পোনেন্টগুলি তাদের বর্তমান ডাইমেনশনের উপর ভিত্তি করে তাদের অভ্যন্তরীণ অনুপাত (যেমন ফন্ট সাইজ এবং স্পেসিং) অ্যাডজাস্ট করতে পারে। এটি নির্দিষ্ট ব্রেকপয়েন্টের মধ্যে জাম্প করার চেয়ে আরও বেশি সুসংহত ডিজাইন তৈরি করে।

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

প্রয়োগ

১. কন্টেনার ডিফাইন করা

কন্টেনার কোয়েরি ইউনিট ব্যবহার করতে, আপনাকে প্রথমে পেরেন্ট এলিমেন্টে কন্টেনমেন্ট কনটেক্সট নির্ধারণ করতে হবে।

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

২. কন্টেনার কোয়েরি ইউনিট ব্যবহার করুন

কন্টেনারের ডাইমেনশন অনুযায়ী সাইজ সেট করতে কন্টেনার কোয়েরি ইউনিট (cqi, cqb ইত্যাদি) ব্যবহার করুন।

• cqi: কন্টেনারের ইনলাইন সাইজের ১% (অনুভূমিক লেখার মোডে প্রস্থ)।
• cqb: কন্টেনারের ব্লক সাইজের ১% (অনুভূমিক লেখার মোডে উচ্চতা)।

মনে রাখবেন: @container কোয়েরি রুল ছাড়াই যেকোনও প্রপার্টিতে সরাসরি কন্টেনার ইউনিট ব্যবহার করা যেতে পারে। নির্দিষ্ট container-type সহ সবচেয়ে কাছের পূর্বপুরুষের উপর ভিত্তি করে এগুলি অটোমেটিক সমাধান হয়ে যায়।

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

৩. clamp()-এর মাধ্যমে ভ্যালু সীমাবদ্ধ করুন

সাইজ যাতে খুব ছোট বা খুব বড় না হয়ে যায়, তার জন্য CSS clamp() ফাংশন ব্যবহার করুন। এটি ব্যবহারকারীর জুম করার বা বেস ফন্ট সাইজ অ্যাডজাস্ট করার ক্ষমতাকে প্রভাবিত করে। টেক্সট যাতে অ্যাক্সেসিবিলিটি নির্দেশিকা মেনে চলে তা নিশ্চিত করতে, সর্বাধিক সাইজ সর্বনিম্ন সাইজের ২.৫ গুণের বেশি হওয়া উচিত নয়।

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

ফলব্যাক স্ট্র্যাটেজি

ব্রাউজার কন্টেনার কোয়েরি সাপোর্ট না করলে, ভিউপোর্ট ইউনিট বা স্ট্যান্ডার্ড মিডিয়া কোয়েরি ব্যবহার করে আপনাকে ফলব্যাক প্রদান করতে হবে।

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

এই ফলব্যাক নিশ্চিত করে যে টেক্সট এখনও স্কেল করে, তবে এটি কম্পোনেন্টের প্রস্থের পরিবর্তে স্ক্রিনের প্রস্থের উপর ভিত্তি করে হবে। আপনার ব্যবহারের ক্ষেত্রে এটি কাজ করে কিনা তা যাচাই করার জন্য এটি পরীক্ষা করা উচিত।