প্রতিক্রিয়াশীল ডিজাইন

সামগ্রিক পেশাদার পদ্ধতি

• কম্পোনেন্ট-চালিত রেসপন্সিভ লেআউট তৈরি করতে @container কোয়েরি ব্যবহার করুন যা ভিউপোর্টের পরিবর্তে তাদের পেরেন্ট কন্টেনারের সাইজের সাথে মানিয়ে নেয়। আরও তথ্যের জন্য সাইজ অ্যাওয়ার স্টাইলিং দেখুন।
• মোবাইল ব্রাউজার UI এলিমেন্ট (যেমন অ্যাড্রেস বার) দেখা গেলে বা অদৃশ্য হয়ে গেলে লেআউট ভেঙে যাওয়া আটকাতে vh/vw-এর পরিবর্তে ডায়নামিক ভিউপোর্ট ইউনিট (dvh, dvw) ব্যবহার করুন।
• লোড করার সময় জায়গা রিজার্ভ করতে এবং কিউমুলেটিভ লেআউট শিফ্ট (CLS) প্রতিরোধ করতে মিডিয়া এলিমেন্টের (যেমন <img> এবং <video>) জন্য aspect-ratio ব্যবহার করুন।

রেসপন্সিভ UI (ফ্লেক্সবক্স, গ্রিড, কন্টেনার কোয়েরি ইউনিট, ভিউপোর্ট ইউনিট)-এর পিছনে লেআউট মেকানিক্সের জন্য, CSS লেআউট এবং রেসপন্সিভ ডিজাইন দেখুন।

রেসপন্সিভ টাইপোগ্রাফি

• clamp()-এ ভিউপোর্ট-রিলেটিভ এবং ফন্ট-রিলেটিভ ইউনিট একত্রিত করুন যাতে ফন্টের সাইজ ভিউপোর্টের সাইজের সাথে স্কেল করা যায় এবং একই সাথে তা যেন কাঙ্ক্ষিত রেঞ্জের মধ্যে থাকে। যেমন, clamp(2rem, 1rem + 5vw, 4rem)। ফন্ট-সাইজ কত দ্রুত পরিবর্তন হবে তা নিয়ন্ত্রণ করতে ভিউপোর্ট-রিলেটিভ ও ফন্ট-রিলেটিভ ইউনিটের অনুপাত অ্যাডজাস্ট করুন।
• clamp() ছাড়া ফন্ট-সাইজের জন্য শুধু vw ব্যবহার করবেন না, কারণ এটি খুব ছোট বা খুব বড় স্ক্রিনে টেক্সটকে খুব ছোট বা খুব বড় করে দেখাতে পারে।

ভিউ পোর্টের পরিবর্তে কন্টেনারের সাথে টাইপ এবং স্পেসিং স্কেল করতে, ফ্লুইড স্কেলিং দেখুন।