Pure.CSS ফ্রেমওয়ার্কে Media Queries এবং Responsive Design সহজভাবে ব্যবহার করা যায়, যা ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটকে বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত করতে সহায়তা করে। Media Queries হল একটি শক্তিশালী CSS টেকনিক, যার মাধ্যমে আপনি বিভিন্ন ডিভাইসের জন্য আলাদা স্টাইল রুলস প্রযোজ্য করতে পারেন। Pure.CSS ফ্রেমওয়ার্কও এর মধ্যে বেশ কিছু responsive ফিচার সরবরাহ করে, যা সহজে ওয়েবসাইটকে বিভিন্ন স্ক্রীনে সঠিকভাবে সাজাতে সাহায্য করে।
1. Media Queries কী এবং কেন ব্যবহার করবেন?
Media Queries CSS-এর একটি ফিচার যা ওয়েব পেজের উপস্থাপন (presentation) কন্ট্রোল করতে ব্যবহৃত হয়। এটি নির্দিষ্ট স্ক্রীন সাইজ বা ডিভাইস অনুযায়ী CSS পরিবর্তন করার সুযোগ দেয়। ওয়েব ডিজাইনে Responsive Design অর্জন করতে এটি অত্যন্ত গুরুত্বপূর্ণ।
Media Queries ব্যবহার করে আপনি ওয়েব পেজের লেআউট, টেক্সট সাইজ, ইমেজ সাইজ ইত্যাদি কাস্টমাইজ করতে পারেন, যাতে আপনার সাইটটি ডেস্কটপ, ট্যাবলেট এবং মোবাইল স্ক্রীনে সঠিকভাবে কাজ করে।
2. Pure.CSS এবং Media Queries
Pure.CSS একটি "mobile-first" CSS ফ্রেমওয়ার্ক, অর্থাৎ এটি ডিজাইন করা হয়েছে এমনভাবে যে প্রথমে মোবাইল ডিভাইসের জন্য উপযুক্ত হবে এবং পরে বড় স্ক্রীন বা ডিভাইসগুলির জন্য কাস্টমাইজ করা যাবে। Pure.CSS তে কিছু মডিউল এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি সহজেই responsive ওয়েবসাইট তৈরি করতে পারেন।
3. Responsive Grid System
Pure.CSS-এর গ্রিড সিস্টেম একটি mobile-first গ্রিড সিস্টেম, যা media queries ব্যবহার করে ওয়েবসাইটকে বিভিন্ন স্ক্রীন সাইজের জন্য অ্যাডজাস্ট করতে সহায়তা করে।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
<p>This content will take up 100% of the screen on small devices, 50% on medium devices, and 33% on large devices.</p>
</div>
</div>
এখানে, pure-u-1, pure-u-md-1-2, এবং pure-u-lg-1-3 ক্লাসগুলি ব্যবহার করা হয়েছে, যা স্ক্রীন সাইজ অনুসারে কন্টেন্টের প্রস্থ অ্যাডজাস্ট করবে:
pure-u-1: ছোট স্ক্রীনে (মোবাইল) পুরো প্রস্থ নিবে।pure-u-md-1-2: মিডিয়াম স্ক্রীনে (ট্যাবলেট) ৫০% প্রস্থ নিবে।pure-u-lg-1-3: বড় স্ক্রীনে (ডেস্কটপ) ৩৩% প্রস্থ নিবে।
4. Basic Media Query উদাহরণ
এখানে একটি সাধারণ media query উদাহরণ দেয়া হলো যা সাইটের লেআউট কাস্টমাইজ করতে ব্যবহৃত হবে, যাতে এটি বিভিন্ন স্ক্রীনে সুন্দরভাবে কাজ করে।
উদাহরণ:
<style>
/* Default styles for small devices */
body {
font-size: 14px;
}
/* Media Query for screens 600px or wider (tablet and up) */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}
/* Media Query for screens 1024px or wider (desktop and up) */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
</style>
এখানে:
- ডিফল্ট স্টাইলগুলো মোবাইল ডিভাইসের জন্য এবং ১৪px ফন্ট সাইজ নির্ধারণ করা হয়েছে।
@media (min-width: 600px)মিডিয়াম স্ক্রীনের জন্য, যেমন ট্যাবলেট এবং তার উপরের ডিভাইস, ফন্ট সাইজ ১৬px হবে।@media (min-width: 1024px)বড় স্ক্রীনের জন্য (ডেস্কটপ), ফন্ট সাইজ ১৮px হবে।
5. Responsive Menu Example (রেসপন্সিভ মেনু)
Pure.CSS এর মাধ্যমে সহজে রেসপন্সিভ মেনু তৈরি করা যায়, যা ছোট স্ক্রীনে (মোবাইল) একটি হ্যামবার্গার মেনু হিসেবে কাজ করবে এবং বড় স্ক্রীনে একটি সাধারণ ন্যাভিগেশন বার হিসাবে দেখাবে।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</nav>
<style>
@media (max-width: 600px) {
.pure-menu-horizontal {
display: block;
}
.pure-menu-list {
display: none;
}
.pure-menu-heading {
cursor: pointer;
}
}
</style>
এখানে:
pure-menu-horizontalক্লাসে একটি সাধারণ হরিজেন্টাল মেনু তৈরি করা হয়েছে।- মিডিয়া কোয়েরি ব্যবহার করে, ছোট স্ক্রীনে মেনুটি ব্লক আকারে রূপান্তরিত হবে, এবং
pure-menu-listএর শো/হাইড করা যাবে।
6. Using Pure.CSS Grid for Responsive Layouts
Pure.CSS এর grid system দিয়ে আপনি খুব সহজে রেসপন্সিভ লেআউট তৈরি করতে পারবেন। আপনি pure-g (grid container) এবং pure-u-* (grid unit) ক্লাস ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য লেআউট অ্যাডজাস্ট করতে পারবেন।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 1</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 2</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 3</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4 pure-u-lg-1-6">
<p>Content 4</p>
</div>
</div>
এখানে, pure-u-1-2, pure-u-md-1-4, এবং pure-u-lg-1-6 ক্লাসগুলি ব্যবহার করে, কন্টেন্টের প্রস্থ সেগুলির জন্য ভিন্ন ভিন্ন স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করা হয়েছে।
Pure.CSS এবং Media Queries ব্যবহার করে আপনি সহজে responsive ওয়েব ডিজাইন তৈরি করতে পারবেন। Mobile-first পদ্ধতি, media queries এবং Pure.CSS grid system ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে ওয়েবসাইটের উপস্থাপন দ্রুত এবং কার্যকরীভাবে কাস্টমাইজ করা যায়। Pure.CSS ফ্রেমওয়ার্কের মডুলার এবং হালকা ডিজাইন আপনাকে সহজে রেসপন্সিভ ওয়েবসাইট তৈরি করতে সহায়তা করবে।
Read more
