Today, this article will help you learn how CSS Media Queries help you build responsive websites. If you are a beginner frontend developer who is currently learning or sharpening your CSS skill, this article will help you understand the concept of responsive design much better.
Why is Responsive Design Important?
Responsive designs help users interact with a website quickly and keep everything simple, attention to detail, and clean. You don’t want a situation where the images present in your code are too big or too tall to fit your browser’s screen.
In essence, responsive web design helps you create websites easily accessible by any device. A website should fit the screen of a mobile device when being viewed with a smartphone, likewise a tablet or desktop.
You have not done a perfect job if users who use the site you developed complain of an element or media being too large or smaller than it should be. Everything should adjust to fit on any device at all.
That is why you should pay attention to what Media queries are and what they do, and where to apply them. With practical examples I will share in this article, you will learn how CSS Media Queries works.
Introduction to Media Queries in CSS
Media queries change how a presentation looks in different devices’ viewports. Viewports are the areas visible to the user depending on the device the user is viewing on. Viewports vary with phones and desktop browsers.
Media Queries allows you to display and alter the properties of HTML elements according to screen size using CSS. Some documents might appear on the desktop and will display in a different size on mobile devices.
How to write Media Queries
The general syntax for writing media queries is as follows
@media (max-width: /* your width here */ ) {/* Your CSS Rules Here */}
The media query above says Media should display according to the css rules set when the device width is below or exactly a specified number of pixels wide.
Having taken note of that, if we were to instruct the body tag of an HTML document to have a background color of pink when viewed on devices lesser than 380px
, the snippet to achieve that would pretty much look like this
@media (max-width: 380px ) {
/* Your CSS Rules Here */
body {
background-color: pink;
}
CSS Media Queries in Action
Here is an example of a media query that returns the content when the device width is more than or equal to 560px
:
<html>
<head>
<title>
Data Entry Website
</title>
<style>
/* Default styling */
p {
font-size: 16px;
color: red;
}
/* Specified Media Query styling */
@media (min-width: 560px) {
p {
font-size: 22px;
color: green;
}
}
</style>
</head>
<body>
<p> I am the red text that will change to from red to green when device with width greater or exactly 560px view me <br>
You can try me on text editor
</p>
</body>
</html>
What the code block above declares is that devices with a width equal to or more than 560px will display the font as 22px and the color of <p> tags will change to green.
When you view this code on a device with a screen size of lesser than 560px, the text will be red and green otherwise.

I will recommend that you play around with the code by changing the width using w3school online text editor or any IDE of your choice.
For different devices screen, you can set the selectors based on what you want making sure all screens get appropriate sizes for a truly responsive website.
Media queries can be implemented directly to an element instead of using the @media
attribute, you can set values within a media tag using class as shown below.
<!-- DOCTYPE html -->
<style>
.responsive-img {
max-width: 100px;
height: auto;
}
img {
width: 500px;
}
</style>
<html>
<head>
<title>
Data Entry Website
</title>
</head>
<body>
<img class="responsive-img" src="https://i1.wp.com/codingindian.com/wp-content/uploads/2021/10/creative-css3-tutorials.jpg?fit=1400%2C802&ssl=1" alt="CSS 3 image">
<img src="https://i1.wp.com/codingindian.com/wp-content/uploads/2021/10/creative-css3-tutorials.jpg?fit=1400%2C802&ssl=1" alt="CSS 3 image">
</body>
</html>

Conclusion
That been said, you know what media queries are in CSS and how to apply it where and when necessary when developing a website.
In this article, you have learned that CSS Media Queries are used to define the screen size of a device or media to fit a screen depending on the device being used to view content.