The following two tabs change content below.
Hi, I have written and developed this site to share my experience and ideas with other colleagues. I also started to prepare interview questions and answers for job seekers. I hope it will help you a lot.

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). Media Queries is useful to  create responsive web design (according to screen size).

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example is given below : 

<!DOCTYPE html>
<html>
<head>
<title> Media Query (KP blogs)</title>
<style>
body {
background-color:green;
}
span{
color:white;
}

@media only screen and (max-width: 300px) {
body {
background-color:red;
}
span{
color:#CEE3F6;
}
}

@media only screen and (min-width: 500px) {
body {
background-color:blue;
}
span{
color:#FFFFFF;
}
}
</style>
</head>
<body>
<span>Resize the browser till 300 pixels you will see body background color will be “RED” and if browser with is equal or greater then 500 pixels then background color will be “BLUE” else background color will be “GREEN”</span>
</body>
</html>

Output for 0 to 300 pixels

min-300

Output for 500 pixels or greater then 500 pixels

max-500

Output for all other sizes

else-size

 

 

 

309 total views, 1 views today

Posted in: web

One thought on “What is Media Queries? and where we can use Media Queries?”

  1. HI I was suffering the layout responsive issue from last 3 days. so now I got the solution ..great thank you very much..

Leave a Reply

Your email address will not be published. Required fields are marked *