Question

组合这些CSS元素的最佳方法是什么？

随着我的网页的增长，我非常关心维护。除了使用的bg图像之外，下面没有太大区别，所以我想知道是否有办法让代码更易于维护。

#section3 {
    background: url(../img/img2.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section3 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section3 {
        height: 50em;
    }
}

#section5 {
    background: url(../img/img3.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section5 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section5 {
        height: 50em;
    }
}

#section7 {
    background: url(../img/img4.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section7 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section7 {
        height: 50em;
    }
}

Answer 1

我建议像这样Fiddle。

#section3 {
    background: url(../img/img2.jpg) no-repeat center center;
}

#section5 {
    background: url(../img/img3.jpg) no-repeat center center;
}

#section7 {
    background: url(../img/img4.jpg) no-repeat center center;
}

#section7, #section5, #section3 {
     -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section7, #section5, #section3 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section7, #section5, #section3 {
        height: 50em;
    }
}

也许您还可以查看 LESS 或 SASS 。

组合多个CSS元素

1 个答案: