সিএসএস মিডিয়া কুয়েরি - Css Media-Queries



মিডিয়া ক্যুয়েরী কি?

মিডিয়া ক্যুয়েরী হলো সিএসএস ৩ এ সংযোজিত একটি পদ্ধতি যা ওয়েব পেজকে সহজে রেস্পন্সিভ করার জন্য ব্যবহার করা হয়।
কিছু নির্দিষ্ট শর্ত সত্য বা true হলেই এটি একটি নির্দিষ্ট কিছু সিএসএস কোড রান করে বা execute করে।

সিএসএস মিডিয়া ক্যুয়েরী ব্যবহারের জন্য @media ব্যবহার করা হয় এবং কোন একটি প্রস্থ বা width নির্ধারণ করা হয় এবং ঐ প্রস্থের সকল ডিভাইসের জন্য নির্দিষ্ট কিছু সিএসএস স্টাইল নির্দিষ্ট করা হয়।

উদাহরণ

যদি ব্রাউজার উইন্ডোটি 600 পিএক্স বা তার কম হয়, তাহলে ব্যাকগ্রাউন্ড এর রঙ হবে lightblue.

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



ব্রেকপয়েন্ট যোগ করা

আগের একটি টিউটোরিয়ালে আমরা সারি এবং কলাম দিয়ে একটি ওয়েব পেজ তৈরি করেছিলাম যেটা রেস্পন্সিভ ওয়েব পেজ ছিল, কিন্তু ওয়েব পেজটি রেস্পন্সিভ হলেও তা ছোট স্ক্রীনের ডিভাইসে ভালো দেখায়নি।

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

768 পিক্সেলে একটি ব্রেকপয়েন্ট যুক্ত করার জন্য নিচে মিডিয়া ক্যোয়ারীর একটি উদাহরণ দেখুন।

উদাহরণ

যখন ব্রাউজার উইন্ডো 768 পিক্সেলের চেয়ে ছোট হয়ে যায় তখন, প্রতিটি কলামের প্রস্থ বা width 100% হবে।

/* For desktop: */
.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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}



মোবাইল স্ক্রীনকে প্রাধান্য দিন

ওয়েব পেজকে ডেক্সটপ এর স্ক্রীনের জন্য রেস্পন্সিভ ডিজাইন করার পূর্বে মোবাইল দিভাইসের জন্য ডিজাইন করা উচিৎ, এর ফলে মোবাইলের মত ছোট স্ক্রীনগুলোতে ওয়েব পেজ দ্রুত লোড হয় বা প্রদর্শিত হয়।

নিচে একটি উদাহরণ দেখুন। এখানে স্ক্রীনের সাইজ 768px থেকে ছোট হলে স্টাইল পরিবর্তন না করে, 768px থেকে বড় হলে তার জন্য স্টাইল পরিবর্তন করেছি। এর ফলে ওয়েব পেজটি মোবাইল ফার্স্ট হয়েছে।

উদাহরণ

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.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%;} }



আরও ব্রেকপয়েন্ট

প্রয়োজনমত একাধিক ব্রেকপয়েন্ট যোগ করা যায়। নিচে একটি উদাহরন দেখুন। এখানে আমরা ট্যাবলেট এবং মোবাইল ফোনের মধ্যে একটি ব্রেকপয়েন্ট যোগ করেছি।

আমরা এটি করেছি আরও 600px এ একটি মিডিয়া ক্যোয়ারী ব্যবহার করেছি এবং 600px এর চেয়ে বড় ডিভাইসের জন্য নতুন কতগুলো ক্লাস (768px এর চেয়ে ছোট) যোগ করে।

উদাহরণ

লক্ষ্য করুন যে ক্লাসের দুটি সেট প্রায় একই রকম, একমাত্র পার্থক্য হল নাম (col- এবং col-s-):

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) { /* For desktop: */ .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 টি কলাম নিয়ে, ২য় ভাগটি 9 টি নিয়ে হবে। এই ২টি ভাগের নিচে থাকবে ৩য় ভাগটি যা ১২টি কলাম নিয়ে তৈরি হবে।

<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>




সাধারণ কিছু ব্রেকপয়েন্ট

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

উদাহরণ

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}




Orientation: Portrait / Landscape

ব্রাউজারের orientation এর ওপর নির্ভর করে কোনও ওয়েব পেজের লেআউট পরিবর্তন করার জন্য মিডিয়া ক্যুয়েরী ব্যবহার করা যায়।
ইছহা হলে কতগুলো সিএসএস স্টাইলকে একটি মিডিয়া ক্যুয়েরীর মাধ্যমে এমন ভাবে ব্যবহার করা যায় যে, যখন "Landscape" ওরিয়েন্টেশন বা ব্রাউজার উইন্ডোর উচ্চতা প্রস্থের চেয়ে কম হবে কেবল মাত্র তখনই কাজ করবে।

উদাহরণ

orientation যদি landscape মোডে থাকে তবে ওয়েব পেজের ব্যাকগ্রাউন্ডে কাল রঙ থাকবে।

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




হাইড করা

মিডিয়া ক্যুয়েরী ব্যবহার করে বিভিন্ন সাইজের স্ক্রীনে কোন কন্টেন্টকে খুব সহজেই লুকিয়ে বা hide করা যায়। নিচে একটি উদাহরণ দেখুন। এখানে স্ক্রীনের সাইজ যদি 600px বা 600px এর কম হয় তবে কন্টেন্টটি প্রদর্শিত হবে না।

উদাহরণ

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}




ফন্ট সাইজ পরিবর্তন

মিডিয়া ক্যুয়েরী ব্যবহার করে বিভিন্ন সাইজের স্ক্রীনে কন্টেন্টের ফন্ট সাইজ পরিবর্তন করা যায়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) { div.example { font-size: 80px; } } /* If the screen size is 600px or less, set the font-size of <div> to 30px */ @media only screen and (max-width: 600px) { div.example { font-size: 30px; } }








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.