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

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

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

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

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

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

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

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

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

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

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

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

@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;
	}
}

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

p {
	font-size: 20px;
}

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

p {
	font-size: 30px;
}

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

p {
	font-size: 15px;
}

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

p {
	font-size: 20px;
}

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

p {
	font-size: 30px;
}