Why does this mobile web page work like this?

css format is like this

@media screen and (min-width:1080px) {
    .outer{
        width:1208px;
        height:302px;
        border:solid 5px red;
        margin:0 auto;
    }
    .inner{
        width:300px;
        height:300px;
        border:dashed 1px blue;
        float:left;
        text-align:center;
        line-height:300px;
        font-size:40px;    
}


@media screen and (max-width:1080px) {
    .outer{
        width:100%;
    min-width:404px;
        height:604px;
        border:solid 5px red;
        margin:0 auto;
    }
    .inner{
        width:49.5%;
        height:300px;
        border:dashed 1px blue;
        float:left;
        min-width:i200px;
        text-align:center;
        line-height:300px;
        font-size:30px;
    }
}

html content

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
</div>    

display

on mobile phone


:5
:1280x720

Mar.07,2021

the curly braces are missing after the first media query. Now mainstream editors should prompt syntax errors. The correct CSS code is as follows:

@media screen and (min-width:1080px) {
    .outer{
        width:1208px;
        height:302px;
        border:solid 5px red;
        margin:0 auto;
    }
    .inner{
        width:300px;
        height:300px;
        border:dashed 1px blue;
        float:left;
        text-align:center;
        line-height:300px;
        font-size:40px;    
    }
}

@media screen and (max-width:1080px) {
    .outer{
        width:100%;
        min-width:404px;
        height:604px;
        border:solid 5px red;
        margin:0 auto;
    }
    .inner{
        width:49.5%;
        height:300px;
        border:dashed 1px blue;
        float:left;
        min-width:i200px;
        text-align:center;
        line-height:300px;
        font-size:30px;
    }
}
Menu