Tutorial: CSS Media Query for Responsive Mobile First Web Design


What is a media query?

Media query is a module in CSS3 that allows to display/render contents on a web browser based on the screen resolution. It is a very important aspect of Responsive Web Design (RWD) approach towards web design.

⚠️ Note: Media screen queries are not well supported by older browsers like - Internet Explorer 6, 7 and 8.

Now-a-days there are wide variety of devices on which people are browsing the web, desktops, laptops, mobile phones, tablets, phablets and even TVs. Statistics show that there is a significant increase in internet traffic from mobile phones, so it is very important to have your website optimized for devices with various screen sizes for better user experience.

Facts! Do you know media query was initially proposed in 1994 and became a part of W3C recommended standard in Mid 2012.

@media is called as the at-rule, based on what rule you define the css block will be displayed or be dormant. In the below example, the css that would be rendered by your device browser will be whats contained in 320px block if your screen width ranges from 320px to 785px, if the screen size is greater then or equal to 786px the selectors in Block B will be rendered. So what we trying to achieve is applying css styles based on screen width conditions.

@media (min-width: 320px) { //Block A
    //selectors

} @media (min-width: 786px) { //Block B
    //selectors

}

Using Logical Operators: and, not and only

What we saw an above example was a simple query, you may want to display same css selectors based of conditions like "If the screen size is 480px". Here screen refers to devices that have screen, you any also design your css or printers by using print

@media screen (min-width: 320px) { //Block A
    //selectors

}

The and logical operator can be used the way we use it programmatically to compile multiple conditions into a single condition, so if you have to render same css selectors for a range of screen width you can use it as below,

@media (min-width: 700px) and (max-width: 1200px) {
    //selectors
}

The not operator can be used in media queries to negate a rule. Its not widely used though and should be avoided.

The or operator is and comma here, lets see an example: if the screen size is 700px or 1200px ally the selectors,

@media (min-width: 700px),(max-width: 1200px) {
    //selectors
}

Now that we know what are media queries, we need to know that all screen sizes we need to take care of, you might need to do some research, listing down few of the important screen sizes,

  • Small screen Mobile : 320px
  • Medium screen Mobile : 480px
  • Large screen Mobile/Tablets : 680px
  • Mobile/Tablets : 800px
  • Laptops/Desktops :960px
  • Laptops/Desktops :1024px
  • Desktops/Tv : 1920px

⚠️ Remember that mobile screens have landscape and portrait modes, we need to take care of those sizes as well!

So let's see how our media query framework would look like for these devices in mind,


    @media only screen and (min-width : 320px) {
    //selectors
}
    @media only screen and (min-width : 480px) {
    //selectors
}
}
    /* Mobile phones/Tablets/Phablets ------- */
    @media only screen and (min-width : 600px) {
    //selectors
}
    /* Tablets/Phablets ----------- */
    @media only screen and (min-width : 800px) {
    //selectors
}
    /* Desktop/Laptops ----------- */
    @media only screen and (min-width : 1024px) {
    //selectors
}
    /* Desktop/Laptops ----------- */
    @media only screen and (min-width : 1200px) {
    //selectors
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Responsive web design using CSS Media Queries :
	Code2care.org</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>

/* For browsers that dosnt support media queries */
* {
	margin: 0 auto
}

.background {
	margin-top: 20px;
	background-color: #bbb;
	padding: 15px;
	width: 900px;
	min-height: 800px;
}

.block2 {
	padding: 15px;
	background-color: yellow;
	height: 500px;
	width: 240px;
	float: right;
}

.block1 {
	padding: 15px;
	background-color: green;
	height: 500px;
	width: 600px;
	float: left;
}

.image {
	margin-top: 50px;
	margin-left: 120px;
	width: 50%;
}

#widthbox {
	width: 100px;
	background-color: #222;
	color: #fff;
	margin-left: 5px;
	text-align: center;
}

/* Mobile phones like iPhone */
@media only screen and (min-width : 320px) {
	* {
		margin: 0 auto
	}
	.background {
		margin-top: 20px;
		background-color: #bbb;
		padding: 15px;
		width: 310px;
		min-height: 800px;
	}
	.block2 {
		padding: 15px;
		background-color: yellow;
		height: 300px;
		width: 280px;
		float: right;
	}
	.block1 {
		padding: 15px;
		background-color: green;
		height: 350px;
		width: 280px;
		float: right;
	}
	#size {
		width: 100px;
		background-color: #222;
		color: #fff;
		margin-left: 5px;
		text-align: center;
	}
	.image {
		margin-top: 20px;
		margin-left: 80px;
		width: 45%;
	}
}

/* Mobile phones with larger screen */
@media only screen and (min-width : 480px) {
	.background {
		width: 460px;
	}
	.block2 {
		background-color: yellow;
		width: 430px;
		height: 300px;
		float: right;
	}
	.block1 {
		background-color: green;
		width: 430px;
		height: 350px;
		float: right;
	}
	.image {
		margin-top: 20px;
		margin-left: 120px;
		width: 40%;
	}
}

}
/* Mobile phones in Potrait view/Tablets/Phablets */
@media only screen and (min-width : 600px) {
	.background {
		width: 580px;
	}
	.block2 {
		background-color: yellow;
		width: 540px;
		float: right;
	}
	.block1 {
		background-color: green;
		width: 540px;
		float: right;
	}
}

/* Tablets/Phablets */
@media only screen and (min-width : 800px) {
	.background {
		width: 780px;
	}
	.block2 {
		background-color: yellow;
		width: 240px;
		height: 400px;
		float: right;
	}
	.block1 {
		background-color: green;
		width: 480px;
		height: 400px;
		float: left;
	}
}

/* Desktop/Laptops */
@media only screen and (min-width : 1024px) {
	.background {
		width: 1000px;
	}
	.block2 {
		background-color: yellow;
		width: 240px;
		height: 400px;
		float: right;
	}
	.block1 {
		background-color: green;
		width: 700px;
		height: 400px;
		float: left;
	}
	.image {
		margin-top: 50px;
		margin-left: 120px;
		width: 40%;
	}
}

/* Desktop/Laptops ----------- */
@media only screen and (min-width : 1200px) {
	.background {
		width: 1200px;
	}
	.block2 {
		background-color: yellow;
		width: 480px;
		height: 500px;
		float: right;
	}
	.block1 {
		background-color: green;
		width: 660px;
		height: 500px;
		float: left;
	}
	.image {
		margin-top: 50px;
		margin-left: 120px;
		width: 50%;
	}
}
}
</style>
</head>
<body>
<div class="background">
<div id="widthbox"></div>
<br>
<div class="block1">
<h3>Block 1</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<div>
<img class="image" src="images/test_image.jpg" />
</div>
</div>
<div class="block2">
<h3>Block 2</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<script type="text/javascript">
	$("#widthbox").text("Width : " + $(window).width());

	$(window).resize(function() {
		$("#widthbox").text("Width :  " + $(window).width());
	});
	</script>
</body>
</html>

jsfiddle demo: https://jsfiddle.net/63tq82au/