我有以下用于网格系统的代码:
.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"
时,它会在调整浏览器大小时在媒体查询中应用类声明。
感谢任何帮助。