</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

Style_Sheets @Import_Rule Structure Box_Model Background_Image Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz

</@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

</CSS3 Quiz Question>

@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