Mobile-first মানে আপনার ভিত্তি স্টাইলগুলি সবচেয়ে ছোট স্ক্রিনের জন্য লেখা, তারপর min-width মিডিয়া কোয়েরি দিয়ে বৃহত্তর স্ক্রিনের জন্য জটিলতা যোগ করা — ডেস্কটপ থেকে শুরু করে জিনিসগুলি সরিয়ে ফেলার পরিবর্তে।
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
কেন mobile-first জয়ী: ভিত্তি CSS ন্যূনতম থাকে (মোবাইল শুধুমাত্র যা প্রয়োজন তা পায় — দুর্বল ডিভাইসগুলিতে কর্মক্ষমতার জন্য ভাল), এবং আপনি জটিলতা স্তর করেন, যা এটিকে ওভাররাইড বা সরিয়ে ফেলার চেয়ে বোঝা সহজ করে। এটি কীভাবে সামগ্রী প্রাকৃতিকভাবে এক কলাম থেকে অনেকগুলিতে পুনর্বিন্যাস হয় তার সাথেও মেলে।
মিডিয়া কোয়েরিগুলি viewport এ সাড়া দেয় — পুরো উইন্ডো। কিন্তু পুনঃব্যবহারযোগ্য কম্পোনেন্ট (একটি কার্ড বলুন) একই পৃষ্ঠায় একটি প্রশস্ত মূল এলাকায় অথবা একটি সংকীর্ণ সাইডবারে উপস্থিত হতে পারে। Viewport প্রস্থ আপনাকে বলতে পারে না কম্পোনেন্ট এর কাছে আসলেই কতটা জায়গা আছে।
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
এখন একই কার্ড স্বয়ংক্রিয়ভাবে অনুভূমিক লেআউটে স্যুইচ করে যখনই এর কন্টেইনার ≥400px — তা স্ক্রিনের জন্য বড় হোক বা এটি একটি প্রশস্ত কলামে থাকুক। কম্পোনেন্টটি সত্যিকারের প্রসঙ্গ-স্বাধীন এবং পুনঃব্যবহারযোগ্য হয়ে ওঠে।
Mobile-first প্রতিক্রিয়াশীল CSS সংক্ষিপ্ত এবং রক্ষণাবেক্ষণযোগ্য রাখে।
কন্টেইনার কোয়েরি একটি প্রধান অগ্রগতি: তারা কম্পোনেন্টগুলিকে তাদের নিজস্ব উপলব্ধ স্থানে সাড়া দিতে দেয়, যা ঠিক যা আপনার কম্পোনেন্ট-ভিত্তিক আর্কিটেকচারে প্রয়োজন (ডিজাইন সিস্টেম, পুনঃব্যবহারযোগ্য কার্ড/উইজেট) যেখানে একই কম্পোনেন্ট অনেক প্রসঙ্গে ভূমিকা রাখে।