css - 未检测到媒体屏幕？

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标签。

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

上面的线指向一个媒体查询视口(viewport)，所以它找不到外部定义的 CSS。