Question

我正在使用此代码来格式化我的产品页面，但是我的媒体查询无法正常工作。

只有第一个查询有效（大于851px）

我的代码：

.my-prods-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .my-prods{
        margin-bottom: 30px;
        box-sizing: border-box;
    }
    @media screen and (min-width:851px){
        .my-prods{
            flex-basis: 21%;
        }
    }
    @media screen and (min-width:601px)and(max-width:850px){
        .my-prods{
            flex-basis: 30%;
        }
    }
    @media screen and (min-width:401px)and(max-width:600px){
        .my-prods{
            flex-basis: 45%;
        }
    }
    @media screen and (max-width:400px){
        .my-prods{
            flex-basis: 90%;
        }
    }

Answer 1

我相信您的媒体查询是经过精心设计的，但是您需要在之间添加空格 and。

像这样：

@media screen and (min-width:601px) and (max-width:850px)

只有第一个媒体查询在851px以上，但其他媒体查询不工作

1 个答案: