এই অধ্যায়ে শিখবো কীভাবে ওয়েবসাইটকে মোবাইল, ট্যাবলেট, এবং ডেস্কটপের মতো বিভিন্ন স্ক্রিন সাইজে সুন্দরভাবে মানিয়ে নিতে হয় — অর্থাৎ Responsive Design এবং এর জন্য ব্যবহৃত প্রধান টুল Media Queries।
১. Responsive Design কী?
Responsive Design হল এমন ডিজাইন যেটা যেকোনো ডিভাইসের স্ক্রিন সাইজ অনুযায়ী নিজেকে পরিবর্তন করে ঠিকমত দেখায়। এতে ইউজার যেকোনো ডিভাইস থেকে ওয়েবসাইট ব্যবহার করতে পারে।
২. Media Queries কী?
Media Queries হল CSS এর একটি পদ্ধতি যার মাধ্যমে স্ক্রিনের সাইজ বা ডিভাইসের ধরন দেখে ভিন্ন ভিন্ন CSS প্রয়োগ করা যায়।
৩. Media Queries এর সাধারণ সিঙ্কট্যাক্স
@media (max-width: 768px) {
/* এই স্টাইলগুলো 768px বা এর কম স্ক্রিনে প্রযোজ্য */
body {
background-color: lightblue;
}
}
৪. Media Query এর উদাহরণসমূহ
মোবাইল ডিভাইসের জন্য (ছোট স্ক্রিন):
@media (max-width: 600px) {
.container {
flex-direction: column; /* ফ্লেক্স আইটেমগুলো এক এক করে নিচে নেমে যাবে */
padding: 10px;
}
}
ট্যাবলেট ডিভাইসের জন্য:
@media (min-width: 601px) and (max-width: 1024px) {
.container {
padding: 20px;
}
}
৫. উদাহরণ: Responsive Flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: #ddd;
padding: 20px;
}
.item {
background-color: #4CAF50;
color: white;
padding: 30px;
margin: 10px;
flex: 1;
text-align: center;
}
/* মোবাইল ডিভাইসের জন্য */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">আইটেম ১</div>
<div class="item">আইটেম ২</div>
<div class="item">আইটেম ৩</div>
</div>
</body>
</html>
৬. Viewport Meta Tag
রেসপন্সিভ ডিজাইনের জন্য HTML ফাইলে এই মেটা ট্যাগ ব্যবহার করা আবশ্যক:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
এটি ব্রাউজারকে বলে ডিভাইসের স্ক্রিন সাইজ অনুসারে পেজের আকার ঠিক করতে।
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
Responsive Design এর গুরুত্ব
-
Media Queries দিয়ে স্ক্রিন সাইজ অনুযায়ী CSS প্রয়োগ
-
Viewport meta tag এর প্রয়োজনীয়তা
-
ছোট থেকে বড় স্ক্রিনে কিভাবে লেআউট পরিবর্তন করবেন
পরবর্তী অধ্যায়:
অধ্যায় ১৩: JavaScript পরিচিতি
লিখুন: “অধ্যায় ১৩ শুরু করো” — তাহলে আমরা জাভাস্ক্রিপ্ট শিখা শুরু করবো।