X

X

X

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


Media Query বলতে কি বোঝায়?

বিভিন্ন সাইজের স্ক্রিনের জন্য আলাদা আলাদাভাবে স্টাইল সেট করার জন্য মিডিয়া কুয়েরি ব্যবহার করা হয়। এটি CSS3 তে নতুনভাবে সংযোজন করা হয়েছে।

@media rule ব্যবহার করে এর অভ্যন্তরে সিএসএস কোড লিখতে হয়। যখন এটি কোনো নির্দিষ্ট স্ক্রিন প্রস্থের জন্য সত্য হয়, তখন এর অভ্যন্তরের স্টাইল কার্যকর হয়। নিচের উদাহরণটি দেখুন:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Breakpoint সংযোজন

ধরুন 250px – 500px, 501px-1000px ইত্যাদি সাইজের জন্য আলাদা আলাদাভাবে আপনার স্টাইল সেট করার প্রয়োজন, সেক্ষেত্রে 250px – 500px হচ্ছে একটি ব্রেকপয়েন্ট এবং 501px-1000px হচ্ছে আরেকটি ব্রেকপয়েন্ট। সিএসএস -এ মিডিয়া কুয়েরি ব্যবহার করে এই ব্রেকপয়েন্টগুলো যুক্ত করা হয়।


Desktop

Phone

768px প্রস্থের জন্য একটি ব্রেকপয়েন্ট যুক্ত করে দেখানো হলো:

Code Example

.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%;
    }
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


মোবাইলের কথা বিবেচনা করে ডিজাইন করবেন

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

ডিজাইনের এই Approach -কে বলা হয় মোবাইল ফার্স্ট ডিজাইন। এই Approach-এ ডিজাইন করার জন্য , 768px এর নিচের ডিজাইন কেমন হবে, তার জন্য কোড না লিখে , লিখতে হবে এর চেয়ে বড় হলে ডিজাইন কেমন হবে তার জন্য কোড লিখা। অর্থাৎ, আগে ছোটো স্ক্রিন ও তারপর বড় স্ক্রিনের জন্য কোড লিখতে হবে।

Code Example

/* 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%;}
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Breakpoint-এর উদাহরণ

আপনার যতগুলো ব্রেকপয়েন্টের প্রয়োজন আপনি ততগুলোই যুক্ত করতে পারবেন। নিচে ট্যাবলেট ও মোবাইলের জন্য ব্রেকপয়েন্ট যুক্ত করে দেখানো হলো:


Desktop

Tablet

Phone

600px এর জন্য একটি ক্লাসের জন্য মিডিয়া কুয়েরি এবং 768px এর উপরের জন্য আলাদা একটি ক্লাসের জন্য মিডিয়া কুয়েরি আর, এর মধ্যবর্তী প্রস্থের জন্য আরও একটি ক্লাসের জন্য মিডিয়া কুয়েরিতে স্টাইল যুক্ত করে দেখানো হলো:

Code Example

@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%;}
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এখন হয়তো সিএসএস ক্লাসের পরিমান বেড়ে যাচ্ছে এবং বিষয়টি আপনার কাছে অপ্রয়োজনীয় মনে হচ্ছে, কিন্তু মূলকথা হচ্ছে, এই পদ্ধতি অনুসরণ করে HTML এ আমরা কন্ডিশনাল সিএসএস স্টাইল যুক্ত করতে পারছি:

HTML উদাহরণ

desktop-এর জন্য:
প্রথম ও তৃতীয় সেকশন ৩টি করে কলাম ধারণ করবে। মধ্যবর্তী সেকশন ৬টি কলাম ধারণ করবে।

tablet-এর জন্য:
প্রথম সেকশন ৩টি কলাম ধারণ করবে, ২য় সেকশন ৯টি কলাম ধারণ করবে এবং ৩য় সেকশনটি প্রথম দুটি সেকশনের নিচে উপস্থাপিত হবে। তাদের মোট কলাম সংখ্যা হবে ১২।

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

Orientation: Portrait / Landscape

ব্রাউজারে অরিয়েন্টেশনের উপর ভিত্তি করেও, মিডিয়া কুয়েরিতে স্টাইল যুক্ত করা যায়।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।