CSS Media Query Tutorial for Responsive Mobile First Web Design


What is a media query?

Media query module in CSS3 (Cascading Style Sheet 3) that allows you to display contents on of your website on a web browser based on the screen resolution. It is a very important aspect of Responsive Web Design (RWD) approach towards web designing.

Nowadays (we are almost in 2021!) there are a 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 a 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 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 what's contained in the 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 in the above example was a simple query, you may want to display the same CSS selectors based on conditions like "If the screen size is 480px". Here screen refers to devices that have a 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 the 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. It's 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 a 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>

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

CSS3 Responsive Design - Example Output
CSS3 Responsive Design - Example Output

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


Comments:

  • Examples helped me! Thank you.
    mki2 12 Sep 2020 12:11:02 GMT
  • This is a really useful article, the wireframe you provided helped, thanks A LOT!
    mki2 02 Sep 2020 11:02:24 GMT
  • Further comments disabled!