CSS-এ মিডিয়া ক্যোয়ারী পরিচিতি

একটি বিশেষ কমান্ড @media আছে, যা স্ক্রীনের প্রস্থের উপর নির্ভর করে ভিন্ন কোড এক্সিকিউট করতে দেয়।

নিম্নলিখিত উদাহরণে, কিছু কোড কাজ করবে, যদি স্ক্রীনের প্রস্থ 300px থেকে 1200px পর্যন্ত হয়:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* কিছু কোড */
}

নিম্নলিখিত উদাহরণে, কিছু কোড কাজ করবে, যদি স্ক্রীনের প্রস্থ 300px-এর বেশি হয়:

css@media (min-width: 300px) {
  /* কিছু কোড */
}

নিম্নলিখিত উদাহরণে, কিছু কোড কাজ করবে, যদি স্ক্রীনের প্রস্থ 1200px-এর কম হয়:

css@media (max-width: 1200px) {
  /* কিছু কোড */
}

আসুন আমাদের মিডিয়া ক্যোয়ারীতে কিছু কোড লিখি। উদাহরণস্বরূপ, নির্দিষ্ট স্ক্রীন সাইজে প্যারাগ্রাফগুলো লাল রং করি:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

এবং এখন স্ক্রীনের প্রস্থের উপর নির্ভর করে প্যারাগ্রাফগুলো বিভিন্ন রং করি:

css@media (max-width: 300px) {
  p {
    color: red;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  p {
    color: green;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    color: blue;
  }
}
@media (min-width: 1200px) {
  p {
    color: orange;
  }
}

Задание 1

নিম্নলিখিত কোডটি যেন 0 থেকে 800px প্রস্থের স্ক্রীনে প্রয়োগ হয়:

cssp {
  font-size: 20px;
}

এবং নিম্নলিখিত কোডটি যেন 800px এবং তার বেশি প্রস্থের স্ক্রীনে প্রয়োগ হয়:

cssp {
  font-size: 30px;
}

Задание 2

নিম্নলিখিত কোডটি যেন 0 থেকে 500px প্রস্থের স্ক্রীনে প্রয়োগ হয়:

cssp {
  font-size: 15px;
}

নিম্নলিখিত কোডটি যেন 500px থেকে 900px প্রস্থের স্ক্রীনে প্রয়োগ হয়:

cssp {
  font-size: 20px;
}

নিম্নলিখিত কোডটি যেন 900px এবং তার বেশি প্রস্থের স্ক্রীনে প্রয়োগ হয়:

cssp {
  font-size: 30px;
}