We will discuss the media query CSS min and max in this article. Let us know about the media query first then we will comprehend the min and max.
Media Query
In CSS, the media query is a method that uses the @media rule for adding a block of CSS properties when certain conditions are satisfied. The media query is utilized to construct a web page that is responsive, which means the appearance of the web page varies in one system and varies in another system on the basis of the screen size because sometimes the screen can be of laptops, tablets, desktops, and mobile phones.
The breakpoint is defined at which the content is to be deformed. When the width of the device matches the breakpoint, then the content is deformed.
Syntax:
@media not| only mediatype and (expressions) {
CSS-Code;
}
The "not", "only" & "and" are the keywords. The "not" keyword is used to invert the media query, and the "only" keyword is used to stop the older browsers from interpreting the wrong meaning of the media query if older browsers are not able to understand it. The "and" keyword is used to combine mediatype and expressions. The media query contains a media type and has one or more expressions that become true or false based on the conditions. The value of media type can be "all", "print" and "screen" . The "all" is utilized for all media type devices. The "print" is utilized for preview mode. The "screen" is utilized for screens of tablets, laptops, desktops, and smartphones.
When the media expressions match the conditions, then the result of the media query is true, and a change in the content is applied. When the media expressions do not match the conditions, then the result of the media query is false, and the content remains the same.
Demonstration of Media Query:
Let's understand the media query through an illustration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Media Query</title>
<style>
body {
text-align: center;
background-color: rgb(176, 224, 248);
}
.jtp {
font-weight: bold;
font-size: 46px;
color: rgb(91, 174, 215);
}
.C# Tutorial {
color: rgb(91, 174, 215);
}
@media screen and (max-width:850px) {
body {
text-align: center;
background-color: rgb(42, 45, 88);
}
.jtp {
font-weight: bold;
font-size: 36px;
color: bisque;
}
.C# Tutorial {
color: bisque;
}
}
@media screen and (max-width:550px) {
body {
text-align: center;
background-color: rgb(194, 197, 239);
}
.jtp {
font-size: 24px;
color: blue;
}
.C# Tutorial {
color: blue;
}
}
</style>
</head>
<body>
<div class="jtp">
Welcome to C# Programming
</div>
<div class="Hello World">
Online Tutorial website
</div>
</body>
</html>
Output:
Upon expanding the screen to full size, the background color transitions to a pale shade of blue while the text color shifts to a deeper blue hue.
When the maximum width reaches 850px, the background color and text color undergo a transformation, as shown below:
When the maximum width reaches 550 pixels, the background color and text color will vary, as illustrated below:
Min-Width:
It is employed to define the smallest width of an HTML element.
Syntax:
min-width: length;
The min-width CSS attribute represents the minimum width of an element, with the dimension specified in pixels, centimeters, etc.
Max-Width:
It is used to specify the maximum width of an HTML element.
Syntax:
max-width: length;
The max-width property in CSS specifies the maximum width of an element, with the length value being able to be defined in pixels, centimeters, and other units.
Min-Height:
It is employed to specify the lowest permissible height of an HTML element.
Syntax:
min-height: length;
The min-height CSS attribute represents the minimum height of an element, with the value specified in units like pixels (px), centimeters (cm), and others.
Max-Height:
It is used to define the utmost height of an HTML element.
Syntax:
max-height: length;
The max-height CSS attribute represents the maximum height of an element, with the length value specified in pixels, centimeters, etc.
We will employ min-width, min-height, max-width, and max-height properties to develop a responsive web page.
Illustrations of Media Query Min-width, Min-height, Max-width, and Max-height
We will understand the min-width and max-width media queries through visual examples.
Illustration 1:
In this example, we'll be employing both min-width and max-width properties. We'll incorporate email hyperlinks that will adjust their styling based on the screen size alterations.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Creating email links and utilizing min-width and max-width</title>
<style>
ul {
list-style-type: none;
}
ul li a {
color: rgb(65, 23, 138);
display: block;
text-decoration: none;
padding: 5px;
}
@media screen and (max-width: 900px) and (min-width: 650px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #ed3333;
}
}
@media screen and (min-width: 901px) {
ul li a:after {
content: " (" attr(data-email) ")";
color: #eb3838;
font-style: italic;
font-size: 15px;
}
}
</style>
</head>
<body>
<h1>If you want to see the effect of min-width and max-width, then you need to resize the screen.</h1>
<ul>
<li><a data-email="krishnasingh@example.com" href="mailto:krishnasingh@example.com"> Krishna Abdul </a></li>
<li><a data-email="karishmasharma@example.com" href="mailto:karishmasharma@example.com"> Karishma Abdul </a></li>
<li><a data-email="kirankapoor@example.com" href="mailto:kirankapoor@example.com"> Kiran Kapoor </a></li>
</ul>
</body>
</html>
Output:
When the minimum width reaches 650px, and the maximum width caps at 900px, the resulting display is as follows:
When the minimum width reaches 901px, the resulting output is displayed as follows:
Otherwise, the output will look as given below:
Illustration 2:
We will generate a list in this example and adjust the font size of the list based on the screen size modifications using min-width and max-width properties.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating a list and applying media min-width and max-width</title>
<style>
div {
text-align: center;
background-color: antiquewhite;
}
@media screen and (min-width: 550px) {
div {
font-size: 24px;
}
}
@media screen and (max-width: 850px) {
div {
font-size: 16px;
}
}
</style>
</head>
<body>
<h3>The list given below will have different font sizes on the basis of screen width.</h3>
<div>
<caption>List of hobbies</caption>
<ul type="none">
<li>Writing</li>
<li>Dancing</li>
<li>Painting</li>
<li>Acting</li>
<li>Gardening</li>
<li>Cooking</li>
<li>Hiking</li>
<li>Filmmaking</li>
<li>Knitting</li>
<li>Camping</li>
</ul>
</div>
</body>
</html>
Output:
When the minimum width reaches 550px, the font size of the list will adjust to 24px.
When the maximum width reaches 850 pixels, the font size of the list adjusts to 16 pixels.
Illustration 3:
When the dimensions of the screen are adjusted, we will modify the background hue of the webpage by utilizing the properties min-height and max-height.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing background color utilizing media min-height and max-height</title>
<style>
body {
background-color: #168f1c;
}
div {
font-size: 36px;
text-align: center;
color: antiquewhite;
background-color: #8fd793;
}
@media screen and (min-height: 850px) {
body {
background-color: #168f1c;
}
}
@media screen and (max-height: 650px) {
body {
background-color: #053507;
}
}
</style>
</head>
<body>
<h1>Welcome to C# Programming</h2>
<div>
<p>Resize the page if you want to see the change in background color.</p>
</div>
</body>
</html>
Output:
When the minimum height reaches 850 pixels, the resulting output is as follows:
When the maximum height reaches 650 pixels, the resulting output is as follows:
Illustration 4:
We will insert the picture in this diagram and adjust the image dimensions based on the screen size by employing min-height and max-height properties.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing the width and height of the image utilizing the media min-width and max-width</title> <style>
body {
background-color: #c6dc4e;
color: rgb(20, 19, 17);
}
@media screen and (min-height: 500px) {
img {
width: 600px;
height: 300px;
}
}
@media screen and (max-height: 700px) {
img {
width: 450px;
height: 250px;
}
}
</style>
</head>
<body>
<h2>Resize the page if you want to see the change in the image size.</h2>
<div>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Sunrise" width="350px" height="300px">
</div>
</body>
</html>
Output:
When the minimum height reaches 500 pixels, the image's width is adjusted to 600 pixels while the height is set to 300 pixels, resulting in the following display:
When the maximum height is 700px, the image's width is adjusted to 450px, and the image's height is adjusted to 250px; the result is displayed as follows:
Illustration 5:
In this example, we'll build a table and adjust the text color within the table based on the screen size by using min-width and max-width properties.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing the text color of the table utilizing the media min-width and max-width</title> <style>
body {
background-color: #faeddb;
}
table, th, td {
border: 1px solid red;
font-size: 18px;
}
@media screen and (max-width: 1400px) {
table {
color: blueviolet;
}
}
@media screen and (min-width: 550px) {
table {
color: blue;
}
}
</style>
</head>
<body>
<h2>Resize the page if you want to see the change in the text color of the table.</h2>
<table>
<caption>Cosmetic Products</caption>
<tr>
<th>ID</th>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>01</td>
<td>Lipstick</td>
<td>10</td>
<td>4500</td>
</tr>
<tr>
<td>02</td>
<td>Eyeshadow Palette</td>
<td>20</td>
<td>20000</td>
</tr>
<tr>
<td>03</td>
<td>Eyeliner</td>
<td>25</td>
<td>2500</td>
</tr>
<tr>
<td>04</td>
<td>Foundation</td>
<td>5</td>
<td>2500</td>
</tr>
</table>
</body>
</html>
Output:
When the minimum width reaches 550px, the text color within the table is adjusted to appear as blue, resulting in the following display:
When the maximum width reaches 1400 pixels, the text color within the table is adjusted to blue-violet, resulting in the displayed output as follows:
Illustration 6:
We are going to create a submission button within the form displayed here and adjust its dimensions as the screen size changes by making use of min-width and max-width properties.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing the size of the button utilizing the media min-width and max-width</title>
<style>
body {
background-color: #d2f7c8;
}
table, th, td {
border: 1px solid red;
font-size: 18px;
}
.submit {
background-color: yellow;
}
@media screen and (max-width: 1200px) {
button {
width: 75px;
height: 40px;
}
}
@media screen and (min-width: 750px) {
button {
width: 120px;
height: 60px;
}
}
</style>
</head>
<body>
<h2>Resize the page if you want to see the change in the size of the button.</h2>
<form>
<label for="first_name">First Name:</label>
<input type="text" id="first_name"> <br> <br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name"> <br> <br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob"> <br> <br>
<button class="submit">Submit</button>
</form>
</body>
</html>
Output:
When the maximum width reaches 1200px, the button's size can be observed in the provided output displayed underneath:
When the minimum width reaches 750px, the button's dimensions can be observed in the output displayed underneath:
Illustration 7:
In this example, we are going to create a grid structure and adjust its look when the viewport size is changed by employing min-width and max-width properties.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing the grid layout utilizing the media min-width and max-width</title>
<style>
body {
background-color: #e0dcce;
}
.container {
display: grid;
gap: 25px;
background-color: rgb(80, 118, 118);
padding: 20px;
}
div {
background-color: rgb(164, 234, 234);
text-align: center;
font-size: 18px;
padding: 20px 0;
}
@media screen and (max-width: 1350px) {
.container {
grid-template-columns: 1fr;
}
}
@media screen and (min-width: 650px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>
<h2>Resize the page if you want to see the change in the grid layout.</h2>
<div class="container">
<div class="item"> Item 1 </div>
<div class="item"> Item 2 </div>
<div class="item"> Item 3 </div>
<div class="item"> Item 4 </div>
</div>
</body>
</html>
Output:
When the minimum width reaches 650px, the grid-template-columns CSS attribute is adjusted to display a two-column layout, resulting in the following output:
When the maximum width reaches 1350px, the CSS property grid-template-columns is adjusted to display a single column, resulting in the following output:
Browser Support:
Following are the browsers that support media queries:
- Google Chrome
- Opera
- Microsoft Edge
- Safari
- Firefox
Conclusion
We have explored the concepts of CSS media query min and max in this tutorial. We have covered min-width, min-height, max-width, and max-height through practical examples.