Question

在我的网站上，我有几个不同的项目（比如购物网站会在网格中显示项目）。每个项目都有特定的宽度％和高度％，具体取决于屏幕尺寸。在1024及以上，我的网站使用干净的网格进行适当的操作，但当缩小到768或以下时，网格中断。

我想要的是每个项目看起来不错，并且像网格一样时尚。在1024px及以上的谷歌浏览器中，它看起来很完美。

[这是镀铬的完美视图]

[这是稍微放大的破碎视图]

您可以看到网格已经不对齐。

以下是我为每个项目使用的代码，但即使我使用的是媒体查询，它似乎也会中断。也许我只是不知道如何正确使用媒体查询？任何建议都将不胜感激。

#content {
    width:100%;
    height:auto;
    background-color:rgba(0,0,0,0);
    background:rgba(0,0,0,0);
    margin:1.5% auto;
    }

#item {
    width:40%;
    height:40%;
    padding:0.5%;
    margin:1%;
    background-color:rgba(0,0,0,.6);
    background:rgba(0,0,0,.6);
    float:left;
    }

以下是我目前使用的唯一媒体查询。

@media screen and (max-width: 1680px) {
    #item {
        width:17%;
        height:60%;
        }
}

@media screen and (max-width: 1024px) {
    #item {
        width:22%;
        height:50%;
        }
}

@media screen and (max-width: 768px) {
    header {width: 98%; margin: 0 auto 1.5% auto;}
    #content {
        width:100%;
        height:auto;
        background-color:rgba(0,0,0,0);
        background:rgba(0,0,0,0);
        margin:1.5% auto;
        }

    #item {
        width:40%;
        height:40%;
        padding:0.5%;
        margin:1%;
        background-color:rgba(0,0,0,.6);
        background:rgba(0,0,0,.6);
        float:left;
        }
    footer {width:98%; margin: 1.5% auto 0 auto;}
}

@media screen and (max-width: 320px) {
    header {width: 98%; margin: 0 auto 1.5% auto;}
    #content {
        width:100%;
        height:auto;
        background-color:rgba(0,0,0,0);
        background:rgba(0,0,0,0);
        margin:0.5% auto 0.5% auto;
        }

    #item {
        width:100%;
        height:30%;
        padding:0.5%;
        margin:0.5% auto 0.5% auto;
        background-color:rgba(0,0,0,.6);
        background:rgba(0,0,0,.6);
        }
    footer {width:100%}
}

路加福音

媒体查询非常敏感

0 个答案: