রেসপনসিভ ওয়েবপেজ ডিজাইন - মিডিয়া কোর্স

মিডিয়া কোয়াইর কী আছে?

মিডিয়া কোয়াইর হল, যা CSS3-এর একটি CSS প্রযুক্তি

শুধুমাত্র যখন নির্দিষ্ট শর্ত পূরণ হয়, তবে তা ব্যবহার করবে @media সিএসএস প্রক্রিয়াটির জন্য শিল্প:

উদাহরণ

যদি ব্রাউজার উইন্ডো 600px কিংবা তার কম, তবে পটভূমির রঙ হবে প্রকাশ্য নীল:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ব্রেকপইন্ট যোগ করুন

এই টিউটোরিয়ালের আগে, আমরা একটি সাইট তৈরি করেছিলাম, যার মধ্যে সারা একটি পাতা এবং স্তম্ভ আছে, কিন্তু এই প্রতিক্রিয়াশীল সাইট ছোট স্ক্রিনে ভালোভাবে দেখা যায়নি。

মিডিয়া কোয়াইর আপনাকে সাহায্য করতে পারে। আমরা একটি ব্রেকপইন্ট যোগ করতে পারি, যেখানে ডিজাইনের কিছু অংশ ব্রেকপইন্টের দুই পাশে ভিন্নভাবে দেখা যাবে。


ডেস্কটপ কম্পিউটার

মোবাইল

768px-এর মধ্যে মিডিয়া কোয়াইর যোগ করুন:

উদাহরণ

যখন স্ক্রিন (ব্রাউজার উইন্ডো) 768px কম, প্রত্যেক স্তম্ভের প্রস্থ 100% হবে:

/* ডেস্কটপ ডিভাইসের জন্য: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* মোবাইলের জন্য: */
  [class*="col-"] {
    width: 100%;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

সর্বদা মোবাইল প্রথম ডিজাইন

মোবাইল প্রথম (Mobile First) এর মানে হল, কম্পিউটার বা অন্য কোনও ডিভাইসের জন্য ডিজাইন করা আগে, মোবাইল ডিভাইসের জন্য ডিজাইন করা হবে (যার ফলে পাতা ছোট ডিভাইসে দ্রুত দেখা যাবে)。

তারমধ্যে, আমরা সিএসএস একটি উন্নতি করতে হবে。

যখন প্রস্থ কম 768px হলে, আমরা ডিজাইনটি সংশোধন করবো, না প্রস্থকে পরিবর্তন করবো। আমরা এইভাবে 'মোবাইল প্রথম' ডিজাইনটি করেছি:

উদাহরণ

/* মোবাইলের জন্য: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* ডেস্কটপের জন্য: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

আরেকটি ব্রেকপইন্ট

আপনি অনেকগুলি ব্রেকপইন্ট যোগ করতে পারেন。

আমরা ট্যাবলেট এবং মোবাইলের মধ্যে একটি ব্রেকপইন্ট যোগ করবো。


ডেস্কটপ কম্পিউটার

ট্যাবলেট

মোবাইল

তারজন্য, আমরা একটি মিডিয়া কোয়াইর (600 পিক্সেলের মধ্যে) যোগ করেছি এবং 600 পিক্সেল (কিন্তু 768 পিক্সেলের কম) বড় হওয়া ডিভাইসের জন্য একটি নতুন শ্রেণী যোগ করেছি:

উদাহরণ

দুটি ক্লাসকে অনুগ্রহ করে, একই ধরনের হওয়ার সম্ভাবনা আছে, কিন্তু একমাত্র পার্থক্য নাম (col- এবং col-s-) রয়েছে:

/* মোবাইলের জন্য: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* ট্যাবলেটের জন্য: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* ডেস্কটপের জন্য: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

দুটি একই ধরনের ক্লাস অত্যন্ত অস্বাভাবিক লাগতে পারে, কিন্তু এটি আমাদের HTML এর মাধ্যমে প্রত্যেক বিন্দুতে স্তম্ভগুলি কীভাবে হবে নিশ্চিত করার সুযোগ দেয়:

HTML ইনস্ট্যান্স

ডেস্কটপের জন্য:

প্রথম এবং তৃতীয় অংশ 3 স্তম্ভ অতিক্রম করবে। মধ্যবর্তী অংশ 6 স্তম্ভ অতিক্রম করবে。

ট্যাবলেটের জন্য:

প্রথম অংশ 3 স্তম্ভ অতিক্রম করবে, দ্বিতীয় অংশ 9 স্তম্ভ অতিক্রম করবে, তৃতীয় অংশ প্রথম এবং দ্বিতীয় অংশের নীচে দেখানো হবে এবং 12 স্তম্ভ অতিক্রম করবে:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

সাধারণ ডিভাইস ব্রেকপইন্ট

উচ্চতা ও প্রস্থ বিভিন্ন সক্রিয়পটক ও ডিভাইস অনেক বেশি, তাই প্রত্যেক ডিভাইসের জন্য সঠিক ব্রেকপইন্ট তৈরি করা কঠিন।সহজতার জন্য, আপনি এই পাঁচটি গুচ্ছকে লক্ষ্য করতে পারেন:

উদাহরণ

/* অত্যন্ত ছোট ডিভাইস (ফোন, 600px বা তার কম) */
@media only screen and (max-width: 600px) {...} 
/* ছোট ডিভাইস (ভার্গীক টেবিলেট ও বড় মোবাইল, 600 পিক্সেল বা তার বেশি) */
@media only screen and (min-width: 600px) {...} 
/* মাঝারি ডিভাইস (ল্যান্ডস্কেপ টেবিলেট, 768 পিক্সেল বা তার বেশি) */
@media only screen and (min-width: 768px) {...} 
/* বড় ডিভাইস (ল্যাপটপ/টেবিলেট, 992px বা তার বেশি) */
@media only screen and (min-width: 992px) {...} 
/* অত্যন্ত বড় ডিভাইস (বড় ল্যাপটপ ও টেবিলেট, 1200px বা তার বেশি) */
@media only screen and (min-width: 1200px) {...}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

দিশা: ফোটো / ল্যান্ডস্কেপ

মিডিয়া কোরিউলটি একইসঙ্গে ব্রাউজারের দিশা অনুযায়ী পৃষ্ঠার সাজসজ্জা পরিবর্তন করতেও ব্যবহৃত হয়。

আপনি একটি সমস্ত CSS অ্যাট্রিবিউট সেট সম্পর্কিত করতে পারেন যা শুধুমাত্র ব্রাউজার উইন্ডোর প্রস্থ বা উচ্চতার মাপের উপর নির্ভর করে, যার নাম 'ল্যান্ডস্কেপ' দিশা:

উদাহরণ

যদি দিশা ল্যান্ডস্কেপ মোড (landscape mode) হয়, তবে ওয়েবসাইটের পটকের রঙ হবে হালকা নীলচেপা:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

মিডিয়া কোরিউলটি দিয়ে এলিমেন্টকে লুকান

মিডিয়া কোরিউলটির একটি সাধারণ ব্যবহার হল বিভিন্ন সক্রিয়পটকের মাপের উপর এলিমেন্টকে লুকান:

উদাহরণ

/* যদি সক্রিয়পটকের মাপ 600 পিক্সেল বা তার কম, তবে এই এলিমেন্টটিকে লুকান */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

মিডিয়া কোরিউলটি দিয়ে ফন্ট সাইজ সম্পর্কিত তত্ত্ব্য করা

আপনি একইসঙ্গে মিডিয়া কোরিউলটি ব্যবহার করে বিভিন্ন সক্রিয়পটকের মাপের উপর তত্ত্ব্য সম্পর্কিত এলিমেন্টের ফন্ট সাইজ পরিবর্তন করতে পারেন:

উদাহরণ

/* যদি সক্রিয়পটকের মাপ 601px বা তার বেশি, তবে <div> এর font-size নিয়ে 80px সেট করুন */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* যদি স্ক্রিনের মাপ 600px বা তার কম হয়, তবে <div> এর font-size কে 30px করুন */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

CSS @media রেফারেন্স ম্যানুয়েল

সমস্ত মিডিয়া টাইপ, বৈশিষ্ট্য/এক্সপ্রেসনের পূর্ণ সংক্ষিপ্তণীর জন্য CSS রেফারেন্স ম্যানুয়েলে @media রুল দেখুন。