CSS Media Queries

CSS Media Queries focus forĀ device-orientation and change responsive screen size,like mobile device size ,and tablet device size etc.




Example:

HTML Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<br><br><br><br>
<center><h1 id="mymediaquery">Hello World...!</h1></center>
</body>
</html>

above html code link for css stylesheet also,like style.css

CSS Code:

#mymediaquery {
	color:blue; /*Normal css code*/
}

/*Now start for responsive media query section */

@media only screen and (max-width: 400px) {
  #mymediaquery {
    color: red; /* h1 color to change mobile view for red color */
  }
}

 

Normal Desktop screen size with property like background-color,color,width,height etc

CSS Code:

#mymediaquery {
	color:blue; /*Normal css code*/
}

Normal Desktop Output:

above picture used for h1 tag color is blue.

Now use for media query to display responsive screen size.

CSS Code:

@media only screen and (max-width: 400px) {
  #mymediaquery {
    color: red; /* h1 color to change mobile view for red color */
  }
}

Normal h1 color is blue,now use for media query to change for red color in responsive screen size.max-width size code importance for media query section,its depend for deviceĀ  screen size.

Media Query Responsive Output:

We hope, you all are like this topic.if you have any query,please drop me your comment below comment box section,we are reply to you as soon as possible.




Add a Comment

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