Parsing the use of media query @media (with code demonstration)-CSS Tutorial-php.cn

Parsing the use of media query @media (with code demonstration)

藏色散人

Release： 2022-08-07 16:48:14

forward

3028 people have browsed it

What is media query

Media query allows us to set CSS styles for the device display based on its characteristics (such as viewport width, screen ratio, device orientation: landscape or portrait), media queries are determined by media A type and one or more conditional expressions that detect media characteristics. Media properties that can be detected in media queries are width , height , and color (etc.). Using media queries, you can customize the display effect for specific output devices without changing the page content.

1. Media query operation method

The actual operation is: start by asking the device (called an expression). If the expression result is true, the CSS in the media query is applied. If If the expression evaluates to false, the CSS within the media query will be ignored.

2. Media query syntax

    @media screen and (max-width:600px) {
        }

Copy after login

3. Code demonstration 1qqq

<!DOCTYPE html>
<html>
<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>
        .row{
            border: 1px solid red;
        }
        .col{
            display: inline-block;
            width: 100%;
            height: 100px;
            background-color: green;
        }
        /* <768px */
        @media screen and (max-width:768px) { 
            .col{
                width: 100%;
            }
        }
        /* >=992 and  */
        @media screen and (min-width:992px){
            .col{
                width: 49%;
            }
        }
        /* >=768px and <1200px */
        @media screen and (min-width:768px) and (max-width:1200px){
            .col{
                width: 48%;
            }
        }
        /* >=1200px */
        @media screen and (min-width: 1200px) {
            .col{
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Copy after login

Rendering after reducing to 768px

Recommended learning: "web front-end"

The above is the detailed content of Parsing the use of media query @media (with code demonstration). For more information, please follow other related articles on the PHP Chinese website!