Media Query CSS Min and Max

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 us comprehend the media query with the help of an example.

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);
        }
        .javatpoint {
            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;
            }
            .javatpoint {
                color: bisque;
            }
        }
 
        @media screen and (max-width:550px) {
            body {
                text-align: center;
                background-color: rgb(194, 197, 239);
            }
            .jtp {
                font-size: 24px;
                color: blue;
            }
            .javatpoint {
                color: blue;
            }
        }
    </style>
</head>
 
<body>
    <div class="jtp">
        Welcome to Javatpoint
    </div>
    <div class="javatpoint">
        Online Tutorial website
    </div>
</body>
 </html>

Output:

When the full-size screen is opened then, the background color is light blue, and the text color is a darker shade of blue.

When the max-width is 850px, then the background color and text color are different, as we can witness below:

When the max-width is 550px, then the background color and text color are different, as we can witness below:

Min-Width:

It is utilized to specify the minimum width of an HTML element.

Syntax:

The min-width is a CSS property, and the length is the value, which can be in px, cm, etc.

Max-Width:

It is utilized to define the maximum width of an HTML element.

Syntax:

The max-width is a CSS property, and length is the value, which can be in px, cm, etc.

Min-Height:

It is utilized to describe the minimum height of an HTML element.

Syntax:

The min-height is a CSS property, and the length is the value, which can be in px, cm, etc.

Max-Height:

It is utilized to specify the maximum height of an HTML element.

Syntax:

The max-height is a CSS property, and length is the value, which can be in px, cm, etc.

We will utilize min-width, min-height, max-width and max-height for creating a responsive web page.

Illustrations of Media Query Min-width, Min-height, Max-width, and Max-height

We will comprehend the media query min-width and max-width with the help of illustrations.

Illustration 1:

In this demonstration, we will use min-width and max-width. We will add the email links, which will change their appearance when the screen size is changed.

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 Singh </a></li>
  <li><a data-email="karishmasharma@example.com" href="mailto:karishmasharma@example.com"> Karishma Sharma </a></li>
  <li><a data-email="kirankapoor@example.com" href="mailto:kirankapoor@example.com"> Kiran Kapoor </a></li>
</ul>

</body>
</html>

Output:

When the min-width is 650px, and the max-width is 900px, then the output is given below:

When the min-width is 901px, then the output is given below:

Otherwise, the output will look as given below:

Illustration 2:

We will construct a list in this demonstration and change the font size of the list when the screen size is changed using min-width and max-width.

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 min-width is 550px, then the font-size of the list becomes 24px.

When the max-width is 850px, then the font-size of the list becomes 16px.

Illustration 3:

When the screen size is changed, we will change the background color of the web page utilizing 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 Javatpoint</h2>
<div>
    <p>Resize the page if you want to see the change in background color.</p>
</div>
</body>
</html>

Output:

When the min-height is 850px, then the output is given below:

When the max-height is 650px, then the output is given below:

Illustration 4:

We will add the image in this illustration and change the size of the image when the screen size is changed utilizing min-height and max-height

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="sunrise.png" alt="Sunrise" width="350px" height="300px">
    </div>
</body>
</html>

Output:

When the min-height is 500px, then the width of the image is set to 600px, and the height of the image is set to 300px; the output is given below:

When the max-height is 700px, then the width of the image is set to 450px, and the height of the image is set to 250px; the output is given below:

Illustration 5:

In this illustration, we will construct a table and change the text color of the table when the screen size is changed utilizing min-width and max-width.

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 min-width is 550px, then the color of the text in the table is set to blue, and the output is given below:

When the max-width is 1400px, then the color of the text in the table is set to blue-violet, and the output is given below:

Illustration 6:

We will construct a submit button in the form in this illustration and change its size when the screen is resized utilizing min-width and max-width.

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 max-width is 1200px, then we can witness the size of the button in the output given below:

When the min-width is 750px, then we can witness the size of the button in the output given below:

Illustration 7:

In this illustration, we will construct a grid layout and change its appearance when the screen is resized utilizing min-width and max-width.

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 min-width is 650px, then the grid-template-columns CSS property is set to show two columns, and the output is given below:

When the max-width is 1350px, then the grid-template-columns CSS property is set to show one column, and the output is given below:

Browser Support:

Following are the browsers that support media queries:

Google Chrome
Opera
Microsoft Edge
Safari
Firefox

Conclusion

We have understood the media query CSS min and max in this article. We have understood min-width, min-height, max-width, and max-height with the help of demonstrations.

Next TopicSearch Bar CSS

← prev next →