The Developer Brains


CSS3 MEDIA-QUERY

Web Designing | Web Development


SEE MORE














</CSS3 MEDIA QUERY>





What is CSS3 media query? CSS3 media-query is used to create responsive web pages. If we want to create a responsive design for our laptop, tablet, and mobile then we can apply CSS3 media query rule on our web page.


SEE MORE
























</@MEDIA QUERY>


How to use @media-query?

If you have some knowledge of device width range. Then you can easily create responsive web layouts by using the code given below.


<style>
	@media screen and (max-width:480px){
		property: value;
		property: value;
		property: value;
	}
</style>

  • This code works for the screen width size less than 480px (mobile devices).
  • Click on try it button and run the code. Minimise your PC screen Zoom In. Use can see the code of H1 tag change from green to red.
Note: please do not use container width greater than the max-width of media query and always try to use width percentage(%) unit.



	

<head>
	<style>
	h1{color:green}
	@media screen and (max-width:300px){
		h1{color:red}
	}
	</style>
</head>

<body>
	<h1>@media-query</h1>
</body>




Try it Yourself





@media-query min-width?

When we use min width then the code inside the @media rule use for the screen width greater than that min width value. We can see the example of @media min-width below.


<style>
	@media screen and (min-width:500px){
		property: value;
		property: value;
		property: value;
	}
</style>


  • This code works for the screen width size greater than 500px (mobile devices).
  • Click on try it button and run the code. change your PC's screen size, you can see the changing color of texts.




	

<head>
	<style>
	h1{color:green}
	@media screen and (min-width:400px)
	{
		h1{
			color:red
			}
	}
	</style>
</head>

<body>
	<h1>
	@media-query
	</h1>
</body>




Try it Yourself





















@media screen and (min-width:500px){} the code inside the @media rule use for the screen width greater than that min-width value.
1. true
2. false




Check Now



CSS3 QUIZ







Next: CSS3 Float Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers