CSS3 Media Queries may be the most useful addition in CSS3.

Before its release, developers have to code separately for different devices like desktop, iphone, etc.

With Media Queries, certain rules can be applied to specific HTML elements with which the web page can be made fluid.

Thanks to that, separate designs are no longer required, a single design will adjust itself for all devices.

Example

In the below example, HTML elements styles are switched based on the screen resolution.

This is just a simple example, a real time website will be created at the Responsive Web Design - Step by Step Example section.

<style>

	p 
	{
	  color:red; 
	  font-size:20px;
	}
	
@media screen and (min-width: 150px) and (max-width:450px) {
	p
	{
	  color:blue; 
	  font-size:15px;
	}
	
</style>
		

Next Lesson > CSS3 Border