এক্সএইচটিএমএল (XHTML) ডকুমেন্টে মিডিয়া কুয়েরি (Media Query) ব্যবহার করে লেআউট কাস্টমাইজ করা সম্ভব। মিডিয়া কুয়েরি CSS-এ একটি শক্তিশালী ফিচার, যা বিভিন্ন ডিভাইসের স্ক্রীন সাইজ, রেজল্যুশন বা অন্যান্য বৈশিষ্ট্যের ভিত্তিতে ওয়েব পেজের লেআউট পরিবর্তন করতে সাহায্য করে। এটি রেসপন্সিভ ডিজাইন (Responsive Design) তৈরিতে গুরুত্বপূর্ণ ভূমিকা পালন করে, যার মাধ্যমে ওয়েব পেজটি বিভিন্ন ডিভাইসে যেমন ডেস্কটপ, ট্যাবলেট, মোবাইল ইত্যাদিতে সঠিকভাবে প্রদর্শিত হয়।
১. মিডিয়া কুয়েরি কি?
মিডিয়া কুয়েরি হল CSS-এর একটি বিশেষ নিয়ম, যা ওয়েব পেজের লেআউট বা স্টাইল পরিবর্তন করতে ব্যবহৃত হয়, ডিভাইসের স্ক্রীন সাইজ বা অন্য কোনো নির্দিষ্ট গুণাবলী অনুসারে। এটি ব্যবহারকারীর ডিভাইসের স্ক্রীন সাইজ, রেজল্যুশন, অরিয়েন্টেশন ইত্যাদি পরিমাপ করে নির্দিষ্ট স্টাইল প্রয়োগ করে।
উদাহরণ:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
এখানে, যদি স্ক্রীনের প্রস্থ 600px বা তার কম হয়, তাহলে ব্যাকগ্রাউন্ড কালার পরিবর্তন হয়ে lightblue হবে।
২. মিডিয়া কুয়েরি সঠিকভাবে ব্যবহার করার নিয়ম
এক্সএইচটিএমএল ডকুমেন্টে মিডিয়া কুয়েরি ব্যবহার করতে হলে সিএসএস স্টাইলশিটে কুয়েরি প্রয়োগ করা হয়। নিচে কয়েকটি সাধারণ মিডিয়া কুয়েরি উদাহরণ দেওয়া হলো:
২.1 স্ক্রীন সাইজ অনুসারে লেআউট পরিবর্তন
<head>
<style>
/* ডিফল্ট স্টাইল (ডেস্কটপ জন্য) */
body {
font-size: 16px;
background-color: white;
}
/* মিডিয়া কুয়েরি: মোবাইল ডিভাইস */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
background-color: lightgrey;
}
}
</style>
</head>
এখানে, যদি স্ক্রীনের প্রস্থ 600px বা তার কম হয়, তাহলে শরীরের ফন্ট সাইজ এবং ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে।
৩. এক্সএইচটিএমএল (XHTML) ডকুমেন্টে মিডিয়া কুয়েরি প্রয়োগ
এক্সএইচটিএমএল ডকুমেন্টে মিডিয়া কুয়েরি প্রয়োগ করতে হয় <style> ট্যাগের মাধ্যমে বা একটি বাইরের সিএসএস ফাইলের মধ্যে। নিচে একটি উদাহরণ দেওয়া হলো:
উদাহরণ: মিডিয়া কুয়েরি সহ XHTML ডকুমেন্ট
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Responsive Layout</title>
<style>
/* ডিফল্ট স্টাইল */
body {
font-size: 16px;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: 0 auto;
background-color: #fff;
}
/* মিডিয়া কুয়েরি: মোবাইলের জন্য */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
.container {
width: 95%;
padding: 10px;
}
}
/* মিডিয়া কুয়েরি: বড় স্ক্রীনের জন্য */
@media screen and (min-width: 1200px) {
.container {
width: 70%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Layout Example</h1>
<p>This page adjusts its layout based on the screen size of the device.</p>
</div>
</body>
</html>
এখানে, এই XHTML ডকুমেন্টে:
- ডিফল্টভাবে সাইটের প্রস্থ 80% থাকবে এবং বড় স্ক্রীনের জন্য 70% হবে।
- যদি স্ক্রীনের প্রস্থ 600px বা তার কম হয়, তাহলে সাইটের প্রস্থ 95% হয়ে যাবে এবং ফন্ট সাইজ ছোট হয়ে যাবে।
- 1200px বা তার বেশি প্রস্থে সাইটের প্রস্থ 70% হবে।
৪. সাধারণ মিডিয়া কুয়েরি শর্ত
মিডিয়া কুয়েরি ব্যবহার করার জন্য কিছু সাধারণ শর্ত রয়েছে, যেগুলো বিভিন্ন ডিভাইসের স্ক্রীন সাইজ বা বৈশিষ্ট্য অনুযায়ী স্টাইল প্রয়োগ করতে সহায়ক।
৪.1 max-width এবং min-width
max-width: এটি ব্যবহার করা হয় যখন আপনি চান যে CSS কিছু নির্দিষ্ট স্ক্রীন সাইজের পরে কার্যকর হোক।min-width: এটি ব্যবহৃত হয় যখন আপনি চান যে CSS কিছু নির্দিষ্ট স্ক্রীন সাইজের আগে কার্যকর হোক।
উদাহরণ:
@media screen and (max-width: 800px) {
/* ছোট স্ক্রীনের জন্য স্টাইল */
}
@media screen and (min-width: 1024px) {
/* বড় স্ক্রীনের জন্য স্টাইল */
}
৪.2 orientation
orientationঅ্যাট্রিবিউটটি ট্যাবলেট বা মোবাইল ডিভাইসের পোর্ট্রেট বা ল্যান্ডস্কেপ অরিয়েন্টেশনের জন্য স্টাইল প্রযোজ্য করতে ব্যবহৃত হয়।
উদাহরণ:
@media screen and (orientation: landscape) {
/* ল্যান্ডস্কেপ মোডে স্টাইল */
}
@media screen and (orientation: portrait) {
/* পোর্ট্রেট মোডে স্টাইল */
}
৫. মিডিয়া কুয়েরি উদাহরণ
উদাহরণ ১: মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য পৃথক লেআউট
<head>
<style>
/* ডিফল্ট (ডেস্কটপ) স্টাইল */
body {
font-size: 18px;
}
/* ট্যাবলেট স্টাইল */
@media screen and (max-width: 1024px) {
body {
font-size: 16px;
}
}
/* মোবাইল স্টাইল */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
</style>
</head>
এখানে:
- ডেস্কটপের জন্য ফন্ট সাইজ 18px।
- ট্যাবলেটের জন্য 16px।
- মোবাইলের জন্য 14px।
মিডিয়া কুয়েরি এক্সএইচটিএমএল (XHTML) ডকুমেন্টে বিভিন্ন স্ক্রীন সাইজের জন্য রেসপন্সিভ লেআউট তৈরি করতে একটি অত্যন্ত কার্যকরী টুল। এটি CSS দিয়ে ওয়েব পেজের ডিজাইন কাস্টমাইজ করতে সক্ষম, যাতে পেজটি মোবাইল, ট্যাবলেট, ডেস্কটপ বা অন্যান্য ডিভাইসে সঠিকভাবে প্রদর্শিত হয়। মিডিয়া কুয়েরি ব্যবহার করে আপনি ব্যবহারকারীর ডিভাইসের সাইজ এবং বৈশিষ্ট্যের ভিত্তিতে আপনার ওয়েব পেজের লেআউট এবং কন্টেন্ট অ্যাডজাস্ট করতে পারেন।
Read more
