মিডিয়া কুয়েরি - Media-Queries

মিডিয়া কুয়েরি কি?

মিডিয়া কুয়েরি হলো সিএসএস(৩) এ সংযোজিত একটি পদ্ধতি যা ওয়েব পেজকে রেস্পন্সিভ করার জন্য ব্যবহার করা হয়।

সিএসএস মিডিয়া কুয়েরি ব্যবহারের জন্য @media ব্যবহার করা হয় এবং একটি প্রস্থ নির্ধারণ করা হয় এবং ঐ প্রস্থের সকল ডিভাইসের জন্য স্টাইল ডিফাইন করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p> ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করা হয়; যখন ডকুমেন্টের প্রস্থ 500 pixel হয়, তখন background-color হয় "lightblue" , অন্যথায় "lightgreen".
    </p>
</body>
</html>

ফলাফল

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

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

মিডিয়া কুয়েরির সাহায্যে আমরা তা ঠিক করবোঃ

ডেস্কটপ

মোবাইল

৭৬৮পিক্সেলের নিচের ডিভাইসের জন্য মিডিয়া কুয়েরি ডিফাইন করিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* 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%;
    }
}
</style>
</head>
<body>

<div class="header">
<h1>ঢাকা</h1>
</div>

<div class="row">

<div class="col-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li>খাদ্য</li>
</ul>
</div>

<div class="col-6">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়। 
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।</p>
</div>
<div class="col-3 right">
<div class="aside">
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।
প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।  </p>
</div>
</div>

</div>

<div class="footer">
<p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>

</body>
</html>

ফলাফল

মোবাইল ফার্স্ট ডিজাইন

মোবাইল ফার্স্ট মানে হচ্ছে, কম্পিউটার বা অন্যান্য বড় ডিভাইসের পূর্বে মোবাইলের জন্য ডিজাইন করা।

এর অর্থ এই যে আমাদের সিএসএস-এ কিছু পরিবর্তন করতে হবে।

স্ক্রিন সাইজ ৭৬৮ পিক্সেলের চেয়ে ছোট হলে স্টাইল পরিবর্তন না করে,৭৬৮ পিক্সেলের চেয়ে বড় হলে পরিবর্তন করবো। এটা আমাদের ডিজাইনকে মোবাইল ফার্স্ট করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* 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%;}
}
</style>
</head>
<body>

<div class="header">
<h1>ঢাকা</h1>
</div>

<div class="row">
<div class="col-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li> খাদ্য</li>
</ul>
</div>

<div class="col-6">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।</p>
</div>

<div class="col-3 right">
<div class="aside">

<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়। 
কাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।
প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।</p>

</div>
</div>

</div>

<div class="footer">
<p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>
</body>
</html>

ফলাফল

ট্যাবলেটের জন্য ডিজাইন

আমরা ট্যাবলেট এবং মোবাইল ফোনের মাঝেও একটি ব্রেকপয়েন্ট যোগ করবো।

কম্পিউটার

ট্যাবলেট

মোবাইল

এই রকম করার জন্য আমরা আরেকটি মিডিয়া কুয়েরি (৬০০পিক্সেলে) এবং একসেট নতুন ক্লাস ব্যবহার করবো ৬০০ পিক্সেলের বড় (কিন্তু ৭৬৮ পিএক্সেলের ছোট) ডিভাইসের জন্যঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-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%;}
}
</style>
</head>
<body>

<div class="header">
<h1>ঢাকা</h1>
</div>

<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li>খাদ্য</li>
</ul>
</div>

<div class="col-6 col-m-9">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী।দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।</p>
</div>

<div class="col-3 col-m-12">
<div class="aside">

<p>ঢাকা বাংলাদেশের রাজধানী। 
দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।

প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।</p>

</div>
</div>

</div>

<div class="footer">
<p> ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>
</body>
</html>

ফলাফল

ইহা দেখতে অদ্ভুত হলেও আমরা একই রকম দুই সেট ক্লাস ব্যবহার করেছি,কিন্তু ইহা আমাদেরকে প্রতিটি ব্রেকপয়েন্টে কি ঘটবে তা নিয়ন্ত্রণ করার সুযোগ করে দিয়েছেঃ

এইচটিএমএল


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

উদাহরণের বর্ণনা

কম্পিউটারের জন্যঃ

প্রথম ও তৃতীয় সেকশন উভয়ে ৩ টি কলামে ভাগ হবে, আর মাঝেরটি ৬টি কলামে ভাগ হবে।

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

প্রথম সেকশন ৩টি কলামে ভাগ হবে, দ্বিতীয়টি ৯টি কলামে ভাগ হবে এবং তৃতীয়টি 12 টি কলামে ভাগ হবে আর প্রথম ও দ্বিতীয় কলামটির নিচে প্রদর্শিত হবেঃ

ওরিয়েন্টেশনঃ Portrait / Landscape

ব্রাউজার ওরিয়েন্টেশনের ফলে পেজের লে-আউট পরিবর্তন করতে মিডিয়া কুয়েরি ব্যবহার করা যায়ঃ

আপনি একসেট সিএসএস প্রোপার্টি রাখতে পারেন যেগুলো "Landscape" ওরিয়েন্টেশন বা ব্রাউজার উইন্ডোর উচ্চতা যখন প্রস্থের চেয়ে কম হবে তখন কাজ করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
 <style>
body {
    background-color: lightgreen;
}

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
 </style>
 </head>
 <body>
 <p>ব্রউজার উইন্ডোতে মাপ পরিবর্তন  করা হয়ঃযখন ডকুমেন্টটের প্রস্থ দৈঘ্য অপেক্ষা বড় হয়,
তখন background-color হয় "lightblue" অন্যথায় "lightgreen".</p>
</body>
</html>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল

সিএসএস-৩

সিএসএস রেসপন্সিভ

সিএসএস রেফারেন্স

মিডিয়া কুয়েরি - Media-Queries

মিডিয়া কুয়েরি কি?

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

মোবাইল ফার্স্ট ডিজাইন

উদাহরণ

ফলাফল

ট্যাবলেটের জন্য ডিজাইন

উদাহরণ

ফলাফল

এইচটিএমএল

উদাহরণের বর্ণনা

ওরিয়েন্টেশনঃ Portrait / Landscape

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য