:不是不工作....(没有双关语意)

时间:2015-01-30 11:11:33

标签: css media-queries

我有以下用于网格系统的代码:

.col-full { width: 100%; }
.col-half { width: 48%; }
.col-one-third { width: 30.63%; }
.col-two-third { width: 65.33%; }
.col-one-fourth { width: 22%; }
.col-three-fourth { width: 74%; }
.col-one-fifth { width: 16.8%; }
.col-two-fifth { width: 37.6%; }
.col-three-fifth { width: 58.4%; }
.col-four-fifth { width: 79.2%; }
.col-one-sixth { width: 13.33%; }
.col-five-sixth { width: 82.67%; }

.col-full, .col-half, .col-one-third, .col-two-third, .col-three-fourth, .col-one-fourth, .col-one-fifth, .col-two-fifth, .col-three-fifth, .col-four-fifth, .col-one-sixth, .col-five-sixth {
    float: left;
    display: block;
    margin-right: 4%;
    margin-bottom: 20px;
}

.col-full {
    clear: both;
    float: none;
    margin-right: 0px;
}

.col-last {
    margin-right: 0px;
}

现在,我希望有一个名为“not-responsive”的类,它会忽略媒体查询所应用的任何内容。

这是我的代码:

@media (max-width: 768px) {

    .col-full:not(.not-responsive), .col-half:not(.not-responsive), .col-one-third:not(.not-responsive), .col-two-third:not(.not-responsive), .col-three-fourth:not(.not-responsive), .col-one-fourth:not(.not-responsive), .col-one-fifth:not(.not-responsive), .col-two-fifth:not(.not-responsive), .col-three-fifth:not(.not-responsive), .col-four-fifth:not(.not-responsive), .col-one-sixth:not(.not-responsive), .col-five-sixth:not(.not-responsive) {
        float: none;
        width: 100%;
    }

}

当我有div class="col-half not-responsive"时,它会在调整浏览器大小时在媒体查询中应用类声明。

感谢任何帮助。

0 个答案:

没有答案