ওয়েব হলো এক বিশাল প্ল্যাটফর্ম! একই HTML আর CSS কখনো ৫ ইঞ্চির ফোনের স্ক্রিনে চালানো হয়, আবার কখনো ৭২ ইঞ্চির টিভিতেও!
বিভিন্ন আকারের এবং আকৃতির স্ক্রিনের সাথে মানিয়ে নিতে, CSS-এ আছে মিডিয়া কুয়েরি , যা আমাদের ভিন্ন ভিন্ন পরিস্থিতিতে আলাদা CSS প্রয়োগ করার সুযোগ দেয়।
রেসপন্সিভ ডিজাইন আধুনিক ফ্রন্ট-এন্ড ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। এই আর্টিকেলে আমরা মিডিয়া কুয়েরি নিয়ে আরও বিস্তারিত জানব। তবে আপাতত, চল মূল ধারণাগুলো শিখে ফেলি।
মিডিয়া কুয়েরি @media সিনট্যাক্স ব্যবহার করে। এটা অনেকটা জাভাস্ক্রিপ্টের if স্টেটমেন্টের মতো কাজ করে:
// Javascript
if (condition) {
// যদি শর্ত পূরণ হয়, তবে এটি চলবে।
}
/* CSS */
@media (condition) {
/* যদি শর্ত পূরণ হয়, তবে এটি কার্যকর হবে। */
}
সহজ না? CSS-এও লজিক ব্যবহার করা যায়, যা ওয়েবসাইটকে আরও স্মার্ট বানায়!
চলো, একটা সহজ বাংলা উদাহরণ দেখি!
CSS
@media (max-width: 400px) {
.bangla-small {
color: blue;
}
}
HTML
<div class="bangla-small">
কী খবর বন্ধু? 😃
</div>
<div class="bangla-small">
ভালোই আছি, তুমি কেমন? 🤗
</div>
রেজাল্ট
যদি তোমার স্ক্রিনের প্রস্থ ৪০০px-এর কম হয়, এই টেক্সট নীল হয়ে যাবে।
কারণ ব্যাখ্যা:
- মিডিয়া কুয়েরি:
@media (max-width: 400px)
মানে হলো:
- স্ক্রিনের প্রস্থ যদি ৪০০px বা তার কম হয়, তখন এর ভেতরের CSS প্রয়োগ হবে।
- স্টাইল প্রয়োগ:
- আমরা
color: blue;
ব্যবহার করেছি। তাই এই শর্তে টেক্সটের রঙ নীল হবে।
যদি স্ক্রিন বড় হয়, টেক্সট ডিফল্ট কালার ( কালো) থাকবে। কেন?
এর কারণ হলো, আমরা CSS-এ বলেছি যে স্ক্রিন ৪০০ px- এর কম হলে রঙ বদলাবে। কিন্তু এর বাইরে (অর্থাৎ স্ক্রিন ৪০০px-এর বেশি হলে), কোনো বিশেষ শর্ত দেওয়া নেই। তাই ব্রাউজার টেক্সটের জন্য ডিফল্ট কালার (কালো) ব্যবহার করবে।
কারণ ব্যাখ্যা :
- ডিফল্ট স্টাইল :
- CSS-এ যদি রঙ নির্দিষ্ট করা না থাকে, ব্রাউজার সাধারণত কালো রঙ ব্যবহার করে।
- আমরা ছোট স্ক্রিনের জন্য নীল রঙ দিয়েছি, কিন্তু বড় স্ক্রিনের জন্য আলাদা কিছু বলিনি।
- মিডিয়া কুয়েরি কেবল শর্ত পূরণে কাজ করে :
- আমাদের কোডে @media দিয়ে বলা হয়েছে: “৪০০px-এর কম হলে নীল হবে।”
- এর মানে, ৪০০px-এর বেশি হলে মিডিয়া কুয়েরি কোনো প্রভাব ফেলবে না।
প্রথমে কালো দেখাবে, কারণ বেশিরভাগ স্ক্রিন ৪০০px-এর বড়। স্ক্রিন সাইজ কমাও, আর ম্যাজিক দেখো—নীল টেক্সট !
এটা খুবই সহজ আর রেসপন্সিভ ডিজাইনের প্রথম ধাপ।
এই উদাহরণে আমরা মিডিয়া কুয়েরি ব্যবহার করে ছোট এবং বড় স্ক্রিনে ভিন্ন ভিন্ন কন্টেন্ট দেখাচ্ছি।
কন্টেন্ট লুকানো!
ওয়েব ডেভেলপমেন্টে আমরা অনেক সময় এমন কিছু কন্টেন্ট লুকিয়ে রাখি, যাতে সেটা শুধুমাত্র নির্দিষ্ট স্ক্রিন সাইজে বা শর্ত পূর্ণ হলে দেখা যায়।
যেমন, তুমি হয়তো চাইবে যে বড় স্ক্রীনে (ডেস্কটপ) কিছু মেনু লিঙ্ক দেখাতে এবং ছোট স্ক্রীনে (মোবাইল) শুধু একটি হ্যামবার্গার আইকন দেখাতে।
এটা কিভাবে করা যায়? মিডিয়া কুয়েরি ব্যবহার করেই!
ধরা যাক, আমাদের কাছে দুইটি আলাদা কন্টেন্ট আছে:
- বড় স্ক্রীন: কন্টেন্টটা দেখাতে চাই, ছোট স্ক্রীনে না।
- ছোট স্ক্রীন: এই কন্টেন্টটা শুধু মোবাইলে দেখাতে চাই।
এখানে কী ঘটবে?
CSS:
/* বড় স্ক্রিনের জন্য /
.large-screens {
display: none; / লুকানো থাকবে */
}
/* মিডিয়া কুয়েরি: স্ক্রিনের প্রস্থ ৩০০px বা তার বেশি হলে /
@media (min-width: 300px) {
.large-screens {
display: block; / বড় স্ক্রীনে দেখা যাবে /
}
.small-screens {
display: none; / ছোট স্ক্রীনে লুকানো থাকবে */
}
}
HTML:
<div class="large-screens">
আমি শুধু বড় স্ক্রীনে দেখাবো! 🖥️
</div>
<div class="small-screens">
আমি শুধু ছোট স্ক্রীনে দেখাবো! 📱
</div>
কী ঘটছে? 
display: none;
- এটি HTML উপাদানকে লুকিয়ে দেয়। ব্রাউজার সেটি রেন্ডারই করে না।
- কোডে
.large-screens
ক্লাস প্রথমে লুকানো আছে।
মিডিয়া কুয়েরি শর্ত:
- যখন স্ক্রিন কমপক্ষে ৩০০ px চওড়া, তখন:
*.large-screens
দেখাবে।
*.small-screens
লুকানো থাকবে।
কিভাবে কাজ করছে:
ডিফল্ট:
.large-screens
লুকানো থাকবে।.small-screens
দেখা যাবে।
স্ক্রিন ৩০০px- এর বেশি হলে:
.large-screens
দেখাবে।
.small-screens
লুকানো থাকবে।
বাস্তবে কোথায় ব্যবহার হয়? 
এই ধরনের কৌশল সাধারণত ন্যাভিগেশন মেনু বা সাইটের ডিজাইনে ব্যবহার হয়, যেমন:
- ডেস্কটপে: লিঙ্কের তালিকা দেখানো।
- মোবাইলে: হ্যামবার্গার আইকন দেখানো (মোবাইল ব্যবহারকারীর জন্য আরও সহজ হতে পারে)।
এভাবে, বড় বা ছোট স্ক্রীনে যে কোনো উপাদানকে লুকানো বা দেখানো সম্ভব হয়!
মিডিয়া কুয়েরি দিয়ে স্ক্রীনের আকার অনুযায়ী ওয়েবসাইটের কন্টেন্ট সহজে নিয়ন্ত্রণ করতে পারা, একেবারে জাদুর মতো!
“Valid Conditions” মিডিয়া কুয়েরিতে নির্দিষ্ট মিডিয়া ফিচার ব্যবহার করা হয়, যেমন max-width
বা min-width
, যা স্ক্রিনের আকারের মতো বিষয় চেক করতে পারে। কিন্তু, সব CSS প্রপার্টি মিডিয়া ফিচার হিসেবে কাজ করতে পারে না।
কেন max-width
বা min-width
ব্যবহার হয়?
max-width
: যখন স্ক্রিন একটি নির্দিষ্ট প্রস্থের কম বা সমান ।min-width
: যখন স্ক্রিন একটি নির্দিষ্ট প্রস্থের বেশি বা সমান ।
ভুল ধারণা:
max-width
এবং min-width
দেখতে CSS প্রপার্টির মতো মনে হয়। কিন্তু মিডিয়া কুয়েরিতে এগুলো মিডিয়া ফিচার ।
- সঠিক :
কেন font-size
কাজ করে না?
font-size
হলো CSS প্রপার্টি, কিন্তু এটা মিডিয়া ফিচার হিসেবে ব্যবহারযোগ্য নয়।- মিডিয়া ফিচার কেবল নির্দিষ্ট ডিভাইস বা স্ক্রিনের বৈশিষ্ট্য চেক করতে পারে, যেমন:
- স্ক্রিনের প্রস্থ (
width
) - স্ক্রিনের উচ্চতা (
height
) - রেজল্যুশন (
resolution
) - রঙের গভীরতা (
color
)
- স্ক্রিনের প্রস্থ (
সঠিক উদাহরণ:
ছোট স্ক্রিনে ব্যাকগ্রাউন্ড বদলানো:
@media (max-width: 600px) {
body {
background-color: pink;
}
}
বড় স্ক্রিনে ফন্ট সাইজ বাড়ানো:
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
ভুল উদাহরণ:
/* মিডিয়া ফিচার হিসেবে
font-size
কাজ করবে না */
@media (font-size: 16px) {
body {
color: blue;
}
}
মনে রাখার কথা:
- মিডিয়া ফিচার স্ক্রিন বা ডিভাইসের গুণাবলি চেক করতে পারে।
- সব CSS প্রপার্টি মিডিয়া ফিচার নয়।
- সঠিক ফিচার ব্যবহার করলেই মিডিয়া কুয়েরি কাজ করবে।
উপসংহার :
মিডিয়া কুয়েরির ভিতরে, আমরা সাধারণত max-width ব্যবহার করি ছোট স্ক্রিনের জন্য (যেমন মোবাইল) এবং min-width ব্যবহার করি বড় স্ক্রিনের জন্য (যেমন ট্যাবলেট বা ডেস্কটপ)।
এভাবে, স্ক্রিনের আকার অনুযায়ী ওয়েবসাইটের ডিজাইন বা রঙ পরিবর্তন করা যায়, যাতে সবার জন্য সুবিধাজনক হয়।
- max-width ব্যবহার করলে ছোট স্ক্রিনের জন্য আলাদা ডিজাইন হয়।
- min-width ব্যবহার করলে বড় স্ক্রিনের জন্য আলাদা ডিজাইন হয়।
এই পদ্ধতি দিয়ে আমরা ওয়েবসাইটটি রেসপন্সিভ (অথাৎ, স্ক্রিনের আকার অনুযায়ী সঠিকভাবে কাজ করা) বানাতে পারি, যেন সবাই ভালোভাবে দেখতে পারে, যেহেতু সবাই বিভিন্ন ধরনের ডিভাইস ব্যবহার করে।