Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা আপনাকে responsive ডিজাইন তৈরি করতে সহায়তা করে। Custom Media Queries ব্যবহার করে, আপনি ওয়েব পেজের স্টাইল পরিবর্তন করতে পারেন, যাতে তা বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে কাজ করে। Media Queries হল CSS-এর একটি শক্তিশালী ফিচার যা আপনাকে নির্দিষ্ট স্ক্রীন সাইজ বা ডিভাইসের জন্য স্টাইল প্রয়োগ করতে সক্ষম করে।
এই আর্টিকেলে, আমরা Pure.CSS এর সাথে Custom Media Queries ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজড স্টাইল তৈরি করার উপায় দেখব।
1. Basic Structure of Media Queries
Media Queries ব্যবহার করার মাধ্যমে, আপনি স্ক্রীনের প্রস্থ, উচ্চতা, রেজোলিউশন ইত্যাদি নির্ধারণ করে স্টাইল প্রয়োগ করতে পারেন। সাধারণত, আপনি min-width এবং max-width ব্যবহার করে বিভিন্ন ডিভাইসের জন্য স্টাইল সেট করতে পারেন।
Syntax:
@media (min-width: 600px) {
/* CSS Rules for devices with a width of 600px or larger */
}
@media (max-width: 600px) {
/* CSS Rules for devices with a width of 600px or smaller */
}
2. Custom Media Queries for Different Screen Sizes
এখানে আমরা Pure.CSS ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টম মিডিয়া কোয়েরি তৈরি করার উদাহরণ দেখবো। আপনি সাধারণত mobile, tablet, desktop এবং large screen এর জন্য আলাদা স্টাইল প্রয়োগ করতে পারবেন।
উদাহরণ: Custom Media Queries in Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Default styles for large screens */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
.content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
background-color: lightblue;
margin: 10px;
padding: 20px;
flex: 1;
}
/* Media Query for Tablets (screen width 600px to 900px) */
@media (max-width: 900px) and (min-width: 600px) {
.box {
flex: 0 0 45%;
}
}
/* Media Query for Mobile Devices (screen width below 600px) */
@media (max-width: 600px) {
.box {
flex: 0 0 100%;
margin: 10px 0;
}
}
/* Media Query for Large Desktop Screens (screen width above 1200px) */
@media (min-width: 1200px) {
.container {
width: 70%;
}
.box {
flex: 0 0 30%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Design Example</h1>
<div class="content">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Default Layout (Large Screens):
- ডিফল্ট স্টাইলের মধ্যে, আমরা
flexবক্স লেআউট ব্যবহার করেছি যেখানে তিনটি বক্সের জন্য যথাক্রমে সমান প্রস্থ দেওয়া হয়েছে। এটি ডেস্কটপের জন্য ডিজাইন করা হয়েছে। .box { flex: 1; }— এই স্টাইলটি বড় স্ক্রীনে তিনটি বক্সকে সমান প্রস্থে ভাগ করে।
- ডিফল্ট স্টাইলের মধ্যে, আমরা
- Tablet Layout (Max Width 900px):
- যখন স্ক্রীনের প্রস্থ 600px থেকে 900px এর মধ্যে থাকে, তখন
.boxউপাদানটি 45% প্রস্থে প্রদর্শিত হবে। @media (max-width: 900px) and (min-width: 600px)— এই মিডিয়া কোয়েরি ট্যাবলেট বা মাঝারি আকারের স্ক্রীনের জন্য স্টাইল প্রয়োগ করে।
- যখন স্ক্রীনের প্রস্থ 600px থেকে 900px এর মধ্যে থাকে, তখন
- Mobile Layout (Max Width 600px):
- মোবাইল স্ক্রীনে (600px এর কম), প্রতিটি
.boxউপাদান 100% প্রস্থে প্রদর্শিত হবে এবং একে অপরের নিচে প্রদর্শিত হবে। @media (max-width: 600px)— এই মিডিয়া কোয়েরি মোবাইল ডিভাইসের জন্য স্টাইল প্রয়োগ করে।
- মোবাইল স্ক্রীনে (600px এর কম), প্রতিটি
- Large Desktop Layout (Min Width 1200px):
- বড় ডেস্কটপ স্ক্রীনে
.containerএর প্রস্থ 70% হবে এবং.boxউপাদানগুলি 30% প্রস্থে প্রদর্শিত হবে। @media (min-width: 1200px)— বড় স্ক্রীনের জন্য এই স্টাইলটি ব্যবহৃত হয়।
- বড় ডেস্কটপ স্ক্রীনে
3. Explanation of Common Media Query Breakpoints
- Mobile Devices:
(max-width: 600px)— এটি সাধারণত মোবাইল ডিভাইসের জন্য ব্যবহৃত হয়। এখানে, স্টাইলগুলি মোবাইলের ছোট স্ক্রীনের জন্য কাস্টমাইজ করা হয়। - Tablets:
(max-width: 900px) and (min-width: 600px)— এটি ট্যাবলেট ডিভাইসের জন্য ব্যবহৃত হয়, যেখানে স্ক্রীনের প্রস্থ 600px থেকে 900px এর মধ্যে থাকে। - Laptops and Desktops:
(min-width: 1200px)— এটি সাধারণত ডেস্কটপ এবং বড় স্ক্রীনের জন্য ব্যবহৃত হয়।
4. Media Query Tips for Better Responsive Design
- Mobile First Approach: সর্বদা প্রথমে মোবাইলের জন্য ডিজাইন করুন। তারপরে বড় স্ক্রীন সাইজগুলির জন্য মিডিয়া কোয়েরি ব্যবহার করুন। এটি আপনাকে আরও রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করবে।
- Use
min-widthfor Larger Screens: বড় স্ক্রীন সাইজের জন্যmin-widthমিডিয়া কোয়েরি ব্যবহার করা উচিত, যেহেতু এটি মোবাইল স্ক্রীন থেকে বড় স্ক্রীনে স্টাইল পরিবর্তন করতে সাহায্য করবে। - Flexible Layouts: Flexbox এবং CSS Grid ব্যবহার করলে, স্ক্রীন সাইজের উপর ভিত্তি করে উপাদানগুলির অবস্থান এবং আকার সহজে কাস্টমাইজ করা যাবে।
Pure.CSS এর সাথে Custom Media Queries ব্যবহার করে আপনি ওয়েব পেজের ডিজাইন এবং লেআউটকে বিভিন্ন স্ক্রীন সাইজের জন্য অপটিমাইজ করতে পারেন। মিডিয়া কোয়েরি ব্যবহার করে, আপনি মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য আলাদা স্টাইল প্রয়োগ করতে পারবেন। Pure.CSS এর গ্রিড সিস্টেম এবং অন্যান্য স্টাইলিং ফিচারগুলির মাধ্যমে, আপনি দ্রুত এবং সহজে একটি রেসপন্সিভ ডিজাইন তৈরি করতে পারেন।
Read more
