Foundation ফ্রেমওয়ার্কে Responsive Images এবং Media Queries ব্যবহারের মাধ্যমে আপনার ওয়েবসাইটটি বিভিন্ন ডিভাইসে সুন্দরভাবে দেখা যায়। Foundation এ রেসপনসিভ ডিজাইন খুবই সহজ এবং কার্যকর, কারণ এটি Flexbox এবং CSS Grid এর মতো টেকনোলজি ব্যবহার করে। এর মাধ্যমে ওয়েবসাইটের কনটেন্ট যেমন টেক্সট, ছবি, এবং ভিডিও বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে রেন্ডার হয়।
Responsive Images
Responsive images হল এমন ইমেজ যা বিভিন্ন স্ক্রীনের সাইজ এবং রেজোলিউশনের জন্য উপযুক্তভাবে পরিবর্তিত হয়। এটি ওয়েবসাইটের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
Foundation এ Responsive Images ব্যবহার:
Foundation ফ্রেমওয়ার্কে রেসপনসিভ ইমেজ ব্যবহারের জন্য <picture> ট্যাগ, srcset এবং sizes অ্যাট্রিবিউট ব্যবহার করা যায়। এর মাধ্যমে আপনি বিভিন্ন রেজোলিউশন এবং ডিভাইসের জন্য ভিন্ন ইমেজ লোড করতে পারেন।
১. srcset এবং sizes ব্যবহার:
<img src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
alt="Responsive Image Example">
এখানে:
srcset: ভিন্ন সাইজের ইমেজগুলির জন্য একটি লিস্ট তৈরি করে। এখানে তিনটি ভিন্ন সাইজের ছবি দেওয়া হয়েছে।sizes: ব্রাউজারকে নির্দেশ দেয় কোন সাইজের ছবি কোন স্ক্রীন সাইজের জন্য লোড হবে।
২. <picture> ট্যাগ ব্যবহার:
<picture>
<source srcset="image-800.jpg" media="(max-width: 600px)">
<source srcset="image-1200.jpg" media="(max-width: 1200px)">
<img src="image-1600.jpg" alt="Responsive Image Example">
</picture>
এখানে:
<source>ট্যাগের মাধ্যমে আপনি নির্দিষ্ট ব্রেকপয়েন্টে আলাদা ছবি লোড করতে পারবেন।<img>ট্যাগটি ব্রাউজারের জন্য ডিফল্ট ছবি সরবরাহ করে, যদি<source>ট্যাগগুলি কাজ না করে।
৩. Foundation এর .responsive-img ক্লাস ব্যবহার:
Foundation ফ্রেমওয়ার্কে একটি .responsive-img ক্লাস দেওয়া আছে, যা আপনার ছবির সাইজকে ওয়েবপেজের কনটেইনারের সাথে অ্যাডজাস্ট করতে সাহায্য করে।
<img src="image.jpg" class="responsive-img" alt="Responsive Image">
এটি ছবিকে রেসপনসিভ করে, এবং ছবির প্রস্থ নিজে থেকে প্যারেন্ট কনটেইনারের প্রস্থের সাথে অ্যাডজাস্ট হয়ে যায়।
Media Queries
Media Queries CSS এর একটি গুরুত্বপূর্ণ অংশ, যা দিয়ে আপনি নির্দিষ্ট ডিভাইসের স্ক্রীন সাইজ এবং রেজোলিউশনের ভিত্তিতে স্টাইল পরিবর্তন করতে পারেন। Foundation ফ্রেমওয়ার্কে এর জন্য ডিফল্ট ব্রেকপয়েন্ট দেওয়া আছে, যেগুলি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত।
১. Foundation এর ডিফল্ট ব্রেকপয়েন্ট:
Foundation এর ডিফল্ট 4টি ব্রেকপয়েন্ট রয়েছে:
- Small (ফোনের জন্য):
0px - 480px - Medium (ট্যাবলেটের জন্য):
481px - 768px - Large (ডেস্কটপের জন্য):
769px - 1024px - X-Large (বড় ডেস্কটপের জন্য):
1025px - 1200px
২. Foundation এর Grid System এর সাথে Media Queries ব্যবহার:
Foundation এর গ্রিড সিস্টেমের মাধ্যমে আপনি সহজেই কনটেন্টের লেআউট পরিবর্তন করতে পারবেন বিভিন্ন ডিভাইসের জন্য। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে গ্রিড সিস্টেমের সাথে media queries ব্যবহার করা হয়েছে।
<div class="row">
<div class="small-12 medium-6 large-4 columns">
<p>এই কলামটি মোবাইলে পুরো প্রস্থ নেবে, ট্যাবলেটে অর্ধেক এবং ডেস্কটপে এক তৃতীয়াংশ প্রস্থ নেবে।</p>
</div>
<div class="small-12 medium-6 large-4 columns">
<p>এই কলামটি একইভাবে রেসপনসিভ হবে।</p>
</div>
</div>
৩. Custom Media Queries:
Foundation এর ডিফল্ট ব্রেকপয়েন্ট ব্যবহার করার পাশাপাশি আপনি আপনার প্রয়োজন অনুযায়ী কাস্টম মিডিয়া কুয়েরি তৈরি করতে পারেন। উদাহরণস্বরূপ:
@media (max-width: 768px) {
body {
background-color: #f0f0f0;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}
এখানে:
- প্রথম মিডিয়া কুয়েরি (max-width: 768px) ব্রেকপয়েন্টের জন্য প্রযোজ্য, যেখানে পটভূমির রং পরিবর্তন করা হচ্ছে।
- দ্বিতীয় মিডিয়া কুয়েরি (min-width: 1024px) ডেস্কটপের জন্য প্রযোজ্য, যেখানে কনটেইনারের সর্বোচ্চ প্রস্থ নির্ধারণ করা হচ্ছে।
Foundation ফ্রেমওয়ার্কে Responsive Images এবং Media Queries ব্যবহারের মাধ্যমে আপনি একটি ওয়েবসাইটকে মোবাইল-ফার্স্ট এবং রেসপনসিভ ডিজাইন করতে পারেন। Responsive Images ব্যবহার করে ইমেজের সাইজ ডিভাইস অনুসারে পরিবর্তন করা যায়, এবং Media Queries এর মাধ্যমে নির্দিষ্ট ডিভাইস বা স্ক্রীন সাইজ অনুযায়ী CSS পরিবর্তন করা যায়। Foundation ফ্রেমওয়ার্ক এই দুটি প্রযুক্তি সহজে ব্যবহার করতে দেয়, যা আপনাকে বিভিন্ন স্ক্রীন সাইজে ওয়েবসাইটের উপযুক্ত প্রদর্শন নিশ্চিত করতে সাহায্য করে।
Read more
