Responsive web design media query CSS

Responsive media query

Responsive media query:- Responsive means the web pages or websites will automatically adjust according to the dimension of devices like mobile phones, tablets, laptop & desktop etc.to make websites or web pages effective and good looking. The Media query is a part of CSS to make website pages responsive followed by @media rule means that if the condition is true then CSS code under that condition will be applied.

Responsive media query syntax :-

@media only screen and (max-width: 500px) { 
/* above is media query if device with is in between 500px then block css code will be applied */
    body {
        background-color: lightblue;
    }
}
  • It is basically used to set the web pages according to devices like mobile phones, tablets, laptop & desktop etc.

Media queries(@media) used to making webpages or websites responsive

DESKTOP VIEW HTML & CSS:-

First of all create a design in html and design with CSS

<html>

<head>

<title>Responsive media query</title>

<style>

nav ul li a {

   display:inline-block;

   padding:10px 20px;

   color:white;

   

}

nav{

width:100%;

height:40px;

background-color:gray;

overflow:hidden;

}

nav ul{

margin:0;

padding:0;

list-style:none;

}

nav li{

float:left;

 

}

#blue{

color:white;

width:100%;

background-color:red;

 

}

</style>

</head>

<body>

<div><img src="http://mindtrickpages.in/wp-content/uploads/2017/02/SAP-Cloud-for-Customer-Banner-01.jpg" width="2000" height="1250"></div>

<div>

<nav>

<ul>

 <li> <a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>

  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>

  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>

  </ul>

 

 

</nav>

</div>

<div id ="blue">Responsive media query:-Responsive means here is that to fit web pages to any media screen and media query is a part of css to make website pages responsive followed by @media rule means that if condition is true then css code under that condition will be applied .</div>

 

</body>

</html>

Snapshot

Responsive media query

MOBILE VIEW HAVING WIDTH LESS THAN 320PX:-

CSS media code to make the website responsive to mobile phones having device width less than 320px. Just as above code add the following code in under style tag to make website responsive on mobile

<style>

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

          #blue{

          background-color: black;

          width: auto;

          }

nav{

width:auto;

height:auto;

padding:5px;

}

nav ul li{

float:none;

width:100%;

text-align:center;

}

nav ul li a{

width:100%;

align:center;

}

img{

width:100%;

height:auto;

}

}

</style>

Snapshot

Responsive media query

 

Leave a Comment