根据屏幕大小换不同背景图片

Posted 2020-10-05 Candy-Yao

　　今天遇到了全屏翻滚的网站首页，自然客户要求图片不能大量变形，于是，我通过写两个不同的类（每个类里面的background-images属性值URL不同），在页面里面通过jq判断屏幕大小，添加和删除自定义类。

　　jq代码如下：

$(function () {
        //判断是否宽屏
        var winWide = window.screen.width;
        var wideScreen = false;
        if (winWide <= 1199) {//1199及以下分辨率
            $(".swiper-wrapper > div:nth-of-type(1)").removeClass(\'slide1\').addClass(\'slide1-phone\');
            $(".swiper-wrapper > div:nth-of-type(2)").removeClass(\'slide2\').addClass(\'slide2-phone\');
            $(".swiper-wrapper > div:nth-of-type(3)").removeClass(\'slide3\').addClass(\'slide3-phone\');
        } else {
            $(".swiper-wrapper > div:nth-of-type(1)").addClass(\'slide1\').removeClass(\'slide1-phone\');
            $(".swiper-wrapper > div:nth-of-type(2)").addClass(\'slide2\').removeClass(\'slide2-phone\');
            $(".swiper-wrapper > div:nth-of-type(3)").addClass(\'slide3\').removeClass(\'slide3-phone\');
            wideScreen = true; //是宽屏
        }
})

　　css代码如下：

.slide1{
    background-image: url(../images/index-bg1.jpg);
    background-size: cover;
}
.slide1-phone {
    background-image: url(../images/mb-p1-bc.jpg);
    background-size: cover;
}
.slide2{
    background-image: url(../images/index-bg2.png);
    background-size: cover;
    text-align: center;
}
.slide2-phone {
    background-image: url(../images/mb-p2-bc.jpg);
    background-size: cover;
}
.slide3{
    background-image: url(../images/index-bg3.jpg);
    background-size: cover;
}
.slide3-phone {
    background-image: url(../images/mb-p3-bc.jpg);
    background-size: cover;
}

　　html代码如下：