這個(gè)移動(dòng)網(wǎng)頁(yè)的效果為何會(huì)這樣？

css 格式是這樣

@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內(nèi)容

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

在手機(jī)上顯示

圖片描述

書(shū)上這樣說(shuō)。

下面，我用自己的手機(jī)打開(kāi)，
主屏尺寸：5英寸
主屏分辨率：1280x720像素

悲劇了，

圖片描述

回答

編輯回答

柚稚

第一個(gè)媒體查詢后面少了個(gè)大括號(hào)，現(xiàn)在主流的編輯器應(yīng)該都會(huì)提示語(yǔ)法錯(cuò)誤，正確的CSS代碼如下：

@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;
    }
}

2018年2月9日 04:02