CSS-এ মিডিয়া কুয়েরির মাধ্যমে ব্লক পুনর্বিন্যাস
বিভিন্ন স্ক্রিন প্রস্থে ব্লক পুনর্বিন্যাস করা শিখি। উদাহরণ হিসেবে নিচের আচরণটি বাস্তবায়ন করি:
প্রথমে আমাদের ব্লকগুলোর HTML কোড লিখি:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
এখন আমাদের ব্লকগুলোর প্যারেন্টের স্টাইল লিখি:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
এখন ব্লকগুলোর নিজস্ব স্টাইল লিখি, যেসব বৈশিষ্ট্য মিডিয়া কুয়েরি দ্বারা পরিবর্তিত হবে সেগুলো উল্লেখ না করে:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
বড় স্ক্রিন প্রস্থে ব্লকগুলোর মধ্যকার ফাঁক স্বয়ংক্রিয়ভাবে গণনা করা হোক:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
আমাদের ব্লকগুলোর প্রস্থ 50%-এর সামান্য কম রাখি,
যাতে ফাঁকা জায়গা থাকে:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
ছোট স্ক্রিন প্রস্থে আমাদের ব্লকগুলোকে কলামে সাজাই:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
তাদের নিচের মার্জিন নির্ধারণ করি:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
সব একত্রিত করে নিচের কোডটি পাই:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
}
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
.child {
margin-bottom: 10px;
}
}
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
.child {
width: 49.5%;
}
}