Media Query in CSS

Posted on 19 March 2019
Shibbir Ahmed
No Comments
CSS
1301 Views

আমরা যে ওয়েবসাইট দেখে থাকি তার presentation বা Layout টা বিভিন্ন device এ বিভিন্নভাবে দেখানোর জন্য কোন markup কোড পরিবর্তন না করে যে পদ্ধতি ব্যবহার করি থাকি তাকে Media Query বলা হয়। বিভিন্ন device বলতে এখানে বলা হচ্ছে- mobile phones, tablets, desktops ইত্যাদি। এই সব device আমরা আমাদের ওয়েবসাইটের Layout টা বিভিন্নভাবে দেখাতে পারি এই Media Query এর মাধ্যমে।

আর মনে রাখবেন আমরা যে Responsive Design বলে থাকি তা এই CSS এর Media Query দিয়েই তৈরী করা হয়।

Media Query CSS এর একটা technique যেটা মূলত CSS এর ভার্সন ৩ থেকে এসেছে। এই Media Query এর মধ্যে কতগুলো media type এবং expressions থাকে যা বিভিন্ন device এর media features এর type এবং conditions এর সাথে match করে। এখানে media features বলতে বুঝানো হচ্ছে device width or screen resolution ইত্যাদি।
মূলত media query একটা logical expression যা true or false ভ্যালু return করে থাকে। মানে, আপনার লেখা media query টা তখনই true ভ্যালু return করবে যখন media query তে দেওয়া media type টা device এর type এর সাথে মিলে যাবে। আর যখনই true হবে তখনই আপনার দেওয়া CSS Style অথবা style sheet গুলো এই device এ Apply হয়ে যাবে।
চলুন কিছু media query দেখে আসা যাক-

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
    /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
    /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
    /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
    /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
    /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
    /* styles */
}

উপরের কোডগুলো দেখে বুঝা যাচ্ছে যে আমরা বিভিন্ন device এর জন্য বিভিন্ন media query লিখেছি। চলুন প্রথম media query টা একটু বুঝে আসি-

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
}

এখানে যে media query টি লিখা হয়েছে তা Smartphones device এর জন্য portrait and landscape মোড। মানে আপনি যখন কোন ওয়েবসাইট (অবশ্যই ওয়েবসাইট টা responsive হতে হবে) আপনার Smartphone এ দেখবেন তখন portrait এবং landscape মোডে কি রকম দেখতে চান তা এই media query এর block এর মধ্যে লিখতে হবে। এখানে block বলতে বুঝানো হচ্ছে { } (সেকেন্ড ব্রাকেট) এর মধ্যের অংশটিকে।
আমরা জানি যে Smartphone device এর width মূলত 320px থেকে 480px এই width এর মধ্যে হয়ে থাকে আর তার জন্য আমরা CSS এর ২টি property যাদের নাম হলো min-width এবং max-width ব্যবহার করেছি। মানে device এর min-width যদি 320px এবং max-width যদি 480px হয় তাহলে আপনার ওয়েবসাইট কি রকম দেখতে হবে বা কি কি style বা style sheet আপনি apply করতে চাচ্ছেন।
চলুন সাধারন একটা Layout তৈরী করে media query বুঝে নিই-

<!DOCTYPE html>
<html>
<head>
	<title>CSS Media Query Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="media-query.css">
</head>
<body>

CSS Media Query Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Left Column

right Column

</div> </div> </body> </html>

উপরের কোডে আমরা HTML দিয়ে সাধারন একটা Layout তৈরী করেছি যেখানে ৪ টা বক্স রয়েছে। প্রথম বক্সটার কাজ হলো আমাদের Layout টাকে পেজের মাঝখানে রাখা, যার background color দেওয়া হয়েছে lightblue এবং পরের বক্সটা নেওয়া হয়েছে শুধুমাত্র একটু design করার জন্য যার background color দেওয়া হয়েছে pink। সবশেষ আরো ২টি বক্স নেওয়া হয়েছে একটি হলো left column এর জন্য এবং আর একটি হলো right column এর জন্য। এই ২টি বক্স এর background color নেওয়া হয়েছে lightblue।
এই Layout এর CSS কোড হলো-

.wrapper {
	width: 1040px;
	border : 2px solid #000;
	padding : 10px;
	background-color: lightblue;
	margin : 0 auto;
	overflow: hidden;
}
.container {
	float: left;
	border : 2px solid red;
	padding : 10px;
	background-color: pink;
}
.left_column {
	width: 472px;
	border: 2px solid #000;
	float: left;
	padding : 10px;
	background-color: lightblue;
}
.right_column {
	width: 472px;
	border: 2px solid #000;
	float: right;
	padding : 10px;
	background-color: lightblue;
}

আউটপুট হিসেবে আমরা দেখতে পাবো-

এখন আমরা চাই যে আমাদের এই Layout টি যখন 320px এবং 480px এই Device Width এর মধ্যে আসবে তখন left column বা বাম দিকের বক্স এর background color হবে Yellow কালারের। আর তার জন্য আমাদের সাহায্য নিতে CSS media query-এর। তাহলে চলুন CSS media query লিখে আসি-

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
    .left_column {
    	background-color: yellow;
    }
}

উপরের কোডটি খেয়াল করলে দেখতে পাবেন যে আমরা এই লাইনটি ব্যবহার করেছি-

@media screen and (min-width: 320px) and (max-width: 480px)

এর মানে হলো আমাদের Layout টি যখন screen media তে দেখা হবে এবং যদি Device এর Width 320px থেকে 480px এর মধ্যে হয় তখন কি হবে ? আমরা চাই তখন left column বা বাম দিকের বক্স এর background color হবে Yellow। আর সেই জন্য আমরা এই media query এর Block এর মধ্যে মানে {} (সেকেন্ড ব্রাকেট) এর মধ্যে লিখেছি-

.left_column {
    background-color: yellow;
}

এখন আপনি যদি আমাদের এই Layout টিকে ব্রাউজারে দেখেন এবং ব্রাউজার টি 320px এবং 480px এই Width এর মধ্যে নিয়ে আসেন তাহলে দেখতে পাবেন বাম দিকে বক্স টির Background Color পরিবর্তন হয়ে গেছে।

উপরের ছবিতে দেখা যাচ্ছে যে বাম দিকে বক্সটির Background Color yellow হয়ে গিয়েছে।
এখন আমরা যদি চাই এই Device Width এ ২টি বক্সেরই Width হবে ১০০%। তাহলে কি করব? তাহলে আমাদেরকে বলে দিতে হবে যে width : auto; মানে 320px এবং 480px এই Device Width এসে আগে যে আমরা width property ভ্যালু 472px; দিয়ে এসিছিলাম তার ভ্যালু টি override হয়ে auto হয়ে যাবে।

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
    .left_column {
    	background-color: yellow;
    	width : auto;
    }
    .right_column {
    	width : auto;
    }
}

আউটপুট হিসেবে আমরা দেখতে পাবো-

এভাবে আপনি চাইলে কোন ট্যাগের কালার বা অন্যান্য property ও পরিবর্তন করে আসতে পারেন।