Basics of Responsive Web Design – Media Queries
Last Updated :
17 May, 2023
Media Query is a CSS technique that is used to produce a responsive design. Essentially, it includes conditions, and responsive design will be only shown if those conditions are met. Why is this useful? Let’s say, you want to make an image smaller on all mobile devices but larger on all other devices such as iPads, laptops, and desktops, then the best way to make this possible is by using media queries.
The general approach to using a media query includes:
@media only screen and (/*condition goes here */) {
body {
/* Conditions goes here */
}
}
Explanation: The above is the general way to call media queries. In the parenthesis, we add the conditions for the browser windows such as what is the minimum/maximum size you want the browser window to be for the conditions in the “body” to appear.
Example: Consider the following code:
CSS
@media only screen and (max-width: 500px) {
body {
background-color: black;
}
}
|
In this case, we are basically saying that make this condition true:
body {
background-color: black;
}
if and only if the width of the device is less than or equal to 500px. Of course, you can change the conditions and make it according to your desire. However, this is the general idea of how media queries work.
We can also add another condition for the browser’s width, consider the following code:
CSS
@media only screen and (min-width: 300px) and (max-width: 500px) {
body {
background-color: black;
}
}
|
In this case, notice how two conditions are given in the parenthesis. We are basically saying to execute the below code if and only if the minimum size of the browser is 300px and the maximum is 500px. So, the code will not execute if the browser window is less than 300px or more than 500px. It should in between 300px and 500px (inclusive). This is another way of using a media query to satisfy the conditions you may have.
Example: In this example, we will make a responsive web page using a media query.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
@media only screen and (min-width: 500px) and (max-width: 700px) {
body {
background-color: red;
}
}
</style>
</head>
<body>
<p>
On devices with minimum width of 500px
and maximum width of 700px, the background
color will be black
</p>
<p>
On the other hand, devices with less than the
minimum width of 500px will have the
body be displayed in blue
</p>
</body>
</html>
|
Output:
Media queries are very useful when you want a specific code to only execute if the conditions regarding the window’s size are met. For example, if you would like the background color of the page to be black on larger devices but blue on smaller devices, then media queries are the best way to handle such cases.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...