CSS-এ মিডিয়া কুয়েরির মাধ্যমে ব্লক পুনর্বিন্যাস

বিভিন্ন স্ক্রিন প্রস্থে ব্লক পুনর্বিন্যাস করা শিখি। উদাহরণ হিসেবে নিচের আচরণটি বাস্তবায়ন করি:

প্রথমে আমাদের ব্লকগুলোর HTML কোড লিখি:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

এখন আমাদের ব্লকগুলোর প্যারেন্টের স্টাইল লিখি:

css.parent {
  display: flex;
  width: 90%;
  margin: 50px auto;
  border: 1px solid red;
}

এখন ব্লকগুলোর নিজস্ব স্টাইল লিখি, যেসব বৈশিষ্ট্য মিডিয়া কুয়েরি দ্বারা পরিবর্তিত হবে সেগুলো উল্লেখ না করে:

css.child {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid green;
}

বড় স্ক্রিন প্রস্থে ব্লকগুলোর মধ্যকার ফাঁক স্বয়ংক্রিয়ভাবে গণনা করা হোক:

css@media (min-width: 500px) {
  .parent {
    justify-content: space-between;
  }
}

আমাদের ব্লকগুলোর প্রস্থ 50%-এর সামান্য কম রাখি, যাতে ফাঁকা জায়গা থাকে:

css@media (min-width: 500px) {
  .child {
    width: 49.5%;
  }
}

ছোট স্ক্রিন প্রস্থে আমাদের ব্লকগুলোকে কলামে সাজাই:

css@media (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
}

তাদের নিচের মার্জিন নির্ধারণ করি:

css@media (max-width: 500px) {
  .child {
    margin-bottom: 10px;
  }
}

সব একত্রিত করে নিচের কোডটি পাই:

css.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%;
  }
}