Question

我有一个样式表，由于某些原因我的媒体查询没有被检测到。当我调整浏览器的大小并Inspect Element时，我仍然看到1060px .container。

这是样式表的一部分

.container {
    margin: 0 auto;    
    width: 1060px;
}


.container .section {
    margin-top:40px; 
    width:320px;
    margin-left:20px;
    float:left;
    height:480px;
    position:relative;

}



/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

    .container {
        padding-left:2%;
        margin: 0 auto;
        width: 96%;
    }

    .container .section {
        width:96%;
        display:block;
        position:relative;

    }
}

Answer 1

您只定义智能手机媒体查询。在此媒体查询CSS之外，您必须通过这种方式定义CSS以获得更大的尺寸。

/* 1080 HD */
@media screen and (max-width: 2048px) {
    .container {
      margin: 0 auto;    
      width: 1060px;
    }


    .container .section {
      margin-top:40px; 
      width:320px;
      margin-left:20px;
      float:left;
      height:480px;
      position:relative;
    }
}

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

.container {
    padding-left:2%;
    margin: 0 auto;
    width: 96%;
}

.container .section {
    width:96%;
    display:block;
    position:relative;

}
}

并在网页文档的元素中添加以下元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

上面的行指向媒体查询视口，因此找不到外部定义的CSS。

没有检测到媒体屏幕？

1 个答案: