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