Media Query

Media query is a technique for making responsive webpages. With media qquery we can devide multiple elements list as row and column.

Syntax - @media media-type (media-feature) operator (media-feature)

@media - It is keyword for media writing, it uses under <style> _ _ _ _ _ _ </style> then define things.
media-type - given here media type usually it is 'screen'.
media-feature - here we give min-width or max -width where media query is run.
operator - here we can give operator, that work between two media feature.

Example - @media screen (min-width:680px) and (max-width:999px) { _ _ _ }

for min-width:1000; - background-color of container is changing

@media (min-width:1000px) {
            .container {
                background-color: rgb(160, 22, 68);
            }
        }

for (min-width:680px) and (max-width:999px) - elements attributs are changing

@media (min-width:680px) and (max-width:999px) {
            .all {
                height: 100px;
                width: 150px;
                background-color: aqua;

            }
        }

for (max-width:380px) - again elements attributs are changing

@media (max-width:380px) {
            .all {
                height: 30px;
                width: 70px;
                background-color: lime;

            }
        }

You see how media query work between min-width and max-width

Complete Code Here

<!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>Document</title>
    <style>
        body {
            background-color: azure;
        }
        .container {
            width: 600px;
            height: 500px;
            background-color: darkgray;
            margin: 20px;
            padding: 20px;
        }
        .all {
            height : 50px;
            width: 100px;
            background-color: gold;
            margin: 10px;
        }
        @media (max-width:380px) {
            .all {
                height: 30px;
                width: 70px;
                background-color: lime;

            }
        }
        @media (min-width:680px) and (max-width:999px) {
            .all {
                height: 100px;
                width: 150px;
                background-color: aqua;

            }
        }
        @media (min-width:1000px) {
            .container {
                background-color: rgb(160, 22, 68);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="all">       first  </div>
        <div class="all second">second </div>
        <div class="all">       third  </div>
        <div class="all">       fourth </div>
    </div>
</body>
</html>

Thankyou for reading, give suggestion if any

CSS Media Query

Table of contents

Media Query