সিএসএস৩ মিডিয়া ক্যোয়ারী - Css3 Media Queries



CSS2 - Media Type

সিএসএস ২ এ, @media রুল প্রথম প্রকাশ করা হয়েছে। এর ফলে ভিন্ন ভিন্ন মিডিয়া এর জন্য ভিন্ন ভিন্ন স্টাইল রুল নির্দিষ্ট করে দেয়া জায়।

উদাহরণ - কম্পিউটার স্ক্রিনের জন্য, প্রিন্টার এর জন্য, হ্যান্ডহেল্ড ডিভাইসের জন্য, টেলিভিশন-টাইপ ডিভাইসের জন্য ভিন্ন ভিন্ন স্টাইলের নিয়ম নির্ধারণ করে দেয়া যায়।

দুর্ভাগ্যবশত এই মিডিয়া টাইপ অনেক ডিভাইসেই ভাল ভাবে সমর্থন করে না।


CSS3 - Media Querie

CSS3 এ মিডিয়া ক্যুয়েরি, CSS2 এর মিডিয়া টাইপ এর ধারণাকে প্রসারিত করেছে।
মিডিয়া ক্যুয়েরি বেশ কিছু কাজ করতে পারে। যেমন -

ভিউপোর্ট এর width এবং height পরিখহা করা,
ডিভাইসের width এবং height পরিখহা করা,
orientation বা অভিযোজন (ট্যাবলেট / ফোন এ আড়াআড়ি অর্থাৎ landscape বা প্রতিকৃতি অর্থাৎ portrait মোডে আছে কি?),
রেজুলেশন,

ডেস্কটপ, ল্যাপটপ, ট্যাবলেট এবং মোবাইল ফোনে (যেমন আইফোন এবং অ্যান্ড্রয়েড ফোনে) একটি ভাল স্টাইল শীট সরবরাহ করার জন্য মিডিয়া ক্যুয়েরি একটি জনপ্রিয় কৌশল।


ব্রাউজার সাপোর্ট

টেবিলে দেয়া রোতে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে।

প্রপার্টি
@media 21.0 9.0 3.5 4.0 9.0


মিডিয়া ক্যুয়েরি সিনট্যাক্স

একটি মিডিয়া ক্যুয়েরি বেশ কয়েকটি মিডিয়া টাইপ নিয়ে গঠিত হতে পারে, যেখানে এক বা একাধিক এক্সপ্রেশন থাকতে পাতে যেগুলো সত্য বা মিথ্যা র ওপর নির্ভর করে কাজ করে।

সিনট্যাক্স

@media not|only mediatype and (expressions) {
CSS-Code;
}


মিডিয়া ক্যুয়েরির ফল সত্যি হয় যদি নির্দিষ্ট মিডিয়া টাইপ এবং ডিভাইস একই প্রকারের হয়। যখন একটি মিডিয়া কুরিয়ে সত্য হয়, তখন এর সাথে সম্পর্কিত স্টাইল শিট সাভাবিক সিএসএস রুল এর মতই কাজ করে।

আপনি ভিন ভিন্ন দিভাইসের জন্য ভিন্ন ভিন্ন স্টাইল শিট ব্যবহার করতে পারেন।

সিনট্যাক্স

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">




সিএসএস মিডিয়া টাইপ

Value Description
allসব প্রকার মিডিয়া টাইপ এর জন্য বাবহ্রিত হয়।
printপ্রিন্টারের জন্য বাবহ্রিত হয়।
screen কম্পিউটার স্ক্রীন, ট্যাবলেট এবং মোবাইল ফোন এর জন্য বাবহ্রিত হয়।
speech টেক্সটকে শব্দ করে পড়তে বাবহ্রিত হয়।


মিডিয়া ক্যুয়েরির উদাহরণ

মিডিয়া ক্যোয়ারীগুলি ব্যবহার করার জন্য একটি ভাল উপায় হল স্টাইল শীটের ভিতরেই একটি বিকল্প CSS বিভাগ তৈরি করে রাখা।

নিছের উদাহরণটি দেখুন, এখানে যদি ভিউপোর্ট 480px বা এর থেকে বড় হয় তবে ব্যাকগ্রাউন্ডের রঙ হবে নীল, আর যদি 480px এর কম হয় তবে ব্যাকগ্রাউন্ডের রঙ হবে লাল।

উদাহরণ

body{
background-color: OrangeRed;
}
@media screen and (min-width: 480px) {
body {
background-color: SlateBlue ;
}
}


নিচের উদাহরণটি দেখুন, এখানে যদি ভিউপোর্ট 480px বা এর থেকে বড় হয় তবে ওয়েব পেজের বাম পাসে একটি মেনুবার থাকে আর যদি 480px এর কম হয় তবে মেনুবার ওয়েব পেজের ওপরে অবস্থান করে।

উদাহরণ

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}








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

Report or suggest about this page

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