What are media queries?
It is a way of applying styles or running other code based on specific characteristics, features, and browser preferences. It allows us to conditionally use styles based on different media types like print, screen etc. media queries are mostly used to apply styles based on the viewport so that web developers can develop responsive websites across different screen sizes. In this article, we are going to discuss the same.
Syntax
@media
Media queries use the @media rule to apply different styles to different types of media and devices based on the type of media.
screen
the screen is the media type we are using here, it matches devices with a screen, and we can also use different media types like print to the printer.
and
The media query supports logical operators, which enable us to match media types based on certain conditions.
max-width
max-width is the media feature we are defining here, and we can apply some styles when the features match. The max-width specifies a width less or equal to the specified width. All the styles will apply when the width is less than the specified width.
min-width
This is another media feature we can define instead of max-width, min-width specifies a width greater or equal to the specified width. All the styles will apply when the width is greater than the specified width.
Example 1 min-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Queries</title>
</head>
<style>
@media screen and (min-width: 768px) {
body {
background-color: #3944f7;
}
h1 {
font-size: 50px;
}
}
</style>
<body>
<h1>Media Queries</h1>
</body>
</html>
Notice that in the above gif when I increase the window size to greater than 768 px our styles get applied, the background color changes, and the font size of the heading becomes 50px. Try running the code on your system and check the output.
Example 2 max-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Queries</title>
</head>
<style>
@media screen and (max-width: 768px) {
body {
background-color: #3944f7;
}
h1 {
font-size: 50px;
}
}
</style>
<body>
<h1>Media Queries</h1>
</body>
</html>
Notice that in the above example styles only apply when the window width is less than and or equal to 768px.
Using and operator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Queries</title>
</head>
<style>
@media screen and (min-width: 768px) and (max-width: 1200px) {
body {
background-color: #3944f7;
}
h1 {
font-size: 50px;
}
}
</style>
<body>
<h1>Media Queries</h1>
</body>
</html>
Notice in the above example that styles only apply when the window width is greater than or equal to 768px and less than or equal to 1200px.
Using print media-type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Queries</title>
</head>
<style>
body {
background-color: #3944f7;
}
h1 {
font-size: 100px;
color: #b4161b;
}
@media print {
body {
background-color: #ffffff;
}
h1 {
font-size: 20px;
color: #000000;
}
}
</style>
<body>
<h1>Media Queries</h1>
</body>
</html>
The print media type matches the document type viewed in the print preview
webpage with normal styles
styles applied on print preview
