সিএসএস৩ মিডিয়া কুয়েরি এমন একটি পদ্ধতি যা দিয়ে নির্দিষ্ট ডিভাইস বা স্ক্রিনের বৈশিষ্ট্যের উপর ভিত্তি করে আলাদা আলাদা সিএসএস স্টাইল প্রয়োগ করা যায়। এটি রেসপন্সিভ ডিজাইন তৈরির প্রধান উপাদান।
মিডিয়া কুয়েরি-এর মূল কাঠামো
মিডিয়া কুয়েরি একটি নির্দিষ্ট শর্ত বা বৈশিষ্ট্য পরীক্ষা করে এবং সেই শর্ত পূরণ হলে নির্ধারিত সিএসএস স্টাইল প্রয়োগ করে।
সিনট্যাক্স:
@media media-type and (condition) {
/* CSS rules here */
}
- media-type: কোন ডিভাইসে স্টাইল প্রয়োগ হবে তা নির্ধারণ করে। উদাহরণ:
screen,print,all। - condition: ডিভাইস বা স্ক্রিনের নির্দিষ্ট বৈশিষ্ট্য, যেমন:
min-width,max-width,orientation।
উদাহরণ: স্ক্রিন সাইজ অনুযায়ী টেক্সট রঙ পরিবর্তন
নিচে দেখানো হয়েছে কিভাবে মিডিয়া কুয়েরি ব্যবহার করে স্ক্রিন সাইজের উপর ভিত্তি করে টেক্সটের রঙ পরিবর্তন করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Example</title>
<style>
h1 {
text-align: center;
color: black;
}
/* স্ক্রিনের সর্বোচ্চ প্রস্থ 600px */
@media screen and (max-width: 600px) {
h1 {
color: red;
}
}
/* স্ক্রিনের প্রস্থ 601px থেকে 992px */
@media screen and (min-width: 601px) and (max-width: 992px) {
h1 {
color: green;
}
}
/* স্ক্রিনের প্রস্থ 992px এর বেশি */
@media screen and (min-width: 993px) {
h1 {
color: blue;
}
}
</style>
</head>
<body>
<h1>CSS3 Media Query Example</h1>
</body>
</html>
ব্যাখ্যা:
- ডিফল্ট স্টাইল:
h1-এর টেক্সটের রঙ কালো (black) রাখা হয়েছে। - মিডিয়া কুয়েরি ১:
যদি স্ক্রিনের প্রস্থ ৬০০ পিক্সেলের কম বা সমান হয়, তাহলে টেক্সটের রঙ লাল (red) হবে। - মিডিয়া কুয়েরি ২:
যদি স্ক্রিনের প্রস্থ ৬০১ পিক্সেল থেকে ৯৯২ পিক্সেলের মধ্যে হয়, তাহলে টেক্সটের রঙ সবুজ (green) হবে। - মিডিয়া কুয়েরি ৩:
যদি স্ক্রিনের প্রস্থ ৯৯৩ পিক্সেলের বেশি হয়, তাহলে টেক্সটের রঙ নীল (blue) হবে।
উদাহরণ: রেসপন্সিভ লেআউট তৈরি করা
নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে মিডিয়া কুয়েরি ব্যবহার করে একটি রেসপন্সিভ লেআউট তৈরি করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.box {
flex: 1 1 100%;
padding: 20px;
text-align: center;
color: white;
margin: 5px;
}
.box:nth-child(1) { background-color: red; }
.box:nth-child(2) { background-color: green; }
.box:nth-child(3) { background-color: blue; }
/* ট্যাবলেট (স্ক্রিন প্রস্থ ৬০০ পিক্সেল বা তার বেশি) */
@media screen and (min-width: 600px) {
.box {
flex: 1 1 calc(50% - 10px);
}
}
/* ডেস্কটপ (স্ক্রিন প্রস্থ ৯৯২ পিক্সেল বা তার বেশি) */
@media screen and (min-width: 992px) {
.box {
flex: 1 1 calc(33.33% - 10px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- ডিফল্ট লেআউট:
.boxক্লাসের সব বক্স ১০০% প্রস্থ নিয়ে আলাদাভাবে প্রদর্শিত হবে। - মিডিয়া কুয়েরি ১ (৬০০px):
স্ক্রিন প্রস্থ ৬০০ পিক্সেল বা তার বেশি হলে বক্সগুলো ৫০% প্রস্থ নিয়ে সাইড-বাই-সাইড প্রদর্শিত হবে। - মিডিয়া কুয়েরি ২ (৯৯২px):
স্ক্রিন প্রস্থ ৯৯২ পিক্সেল বা তার বেশি হলে বক্সগুলো ৩৩.৩৩% প্রস্থ নিয়ে তিনটি কলামে প্রদর্শিত হবে।
উদাহরণ: রেসপন্সিভ নেভিগেশন মেনু
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 10px 20px;
}
.menu {
display: none;
}
nav a {
text-decoration: none;
color: white;
margin: 0 10px;
}
/* বড় স্ক্রিনে নেভিগেশন মেনু দেখাও */
@media screen and (min-width: 768px) {
.menu {
display: flex;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">MyLogo</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>
ব্যাখ্যা:
- ডিফল্ট অবস্থায়:
.menuক্লাসটি মোবাইল স্ক্রিনে লুকানো (display: none) থাকে। - মিডিয়া কুয়েরি:
স্ক্রিন প্রস্থ ৭৬৮ পিক্সেল বা তার বেশি হলে.menuক্লাসটি প্রদর্শিত (display: flex) হয়।
সাধারণ মিডিয়া কুয়েরি ব্রেকপয়েন্ট
| ডিভাইস | ব্রেকপয়েন্ট (Breakpoints) |
|---|---|
| স্মার্টফোন | max-width: 600px |
| ট্যাবলেট | min-width: 600px এবং max-width: 992px |
| ডেস্কটপ | min-width: 992px এবং max-width: 1200px |
| বড় স্ক্রিন | min-width: 1200px |
মিডিয়া কুয়েরি ব্যবহার করার সময় কিছু টিপস
- মোবাইল ফার্স্ট অ্যাপ্রোচ:
প্রাথমিক স্টাইল মোবাইল ডিভাইসের জন্য তৈরি করুন, এবং বড় স্ক্রিনের জন্য মিডিয়া কুয়েরি ব্যবহার করে স্টাইল আপডেট করুন। - পরীক্ষা করুন:
ব্রাউজারের ডেভেলপার টুলস ব্যবহার করে ভিন্ন ভিন্ন স্ক্রিন সাইজে পরীক্ষা করুন। - কোড অরগানাইজ করুন:
মিডিয়া কুয়েরি গুলো পৃথক সেকশনে রাখুন যাতে সহজে বোঝা যায়।
এই টিউটোরিয়ালের মাধ্যমে, আপনি সহজেই সিএসএস মিডিয়া কুয়েরি ব্যবহার করে রেসপন্সিভ ডিজাইন তৈরি করতে পারবেন।
Content added By
Read more
