12/9

@media screen and (max- 650px){
#quan{
98%;
margin: auto;
position: relative;
}
.duoYong ul li a div {
3.09rem;
}

.duoYong ul li a .maiDan {
background: url("../images/bot_menu.jpg") -20px 0;
}

.duoYong ul li a .youHui {
background: url("../images/bot_menu.jpg") -180px 0;
}

.duoYong ul li a .diTu {
background: url("../images/bot_menu.jpg") -340px 0;
}

.duoYong ul li a .woDe {
background: url("../images/bot_menu.jpg") -490px 0;
}


@media screen and (min- 326px) {
.duoYong ul li a div {
1.62rem;
}
.duoYong ul li a .maiDan {
background: url("../images/bot_menu.jpg") -50px 0;
}

.duoYong ul li a .youHui {
background: url("../images/bot_menu.jpg") -200px 0;
}

.duoYong ul li a .diTu {
background: url("../images/bot_menu.jpg") -350px 0;
}

.duoYong ul li a .woDe {
background: url("../images/bot_menu.jpg") -510px 0;
}

}

}

@media screen and (min- 600px) and (max- 650px){
.duoYong ul li a div {
2.8rem;
}
.duoYong ul li a .maiDan {
background: url("../images/bot_menu.jpg") -10px 0;
}

.duoYong ul li a .youHui {
background: url("../images/bot_menu.jpg") -180px 0;
}

.duoYong ul li a .diTu {
background: url("../images/bot_menu.jpg") -320px 0;
}

.duoYong ul li a .woDe {
background: url("../images/bot_menu.jpg") -450px 0;
}
}

@media screen and (min- 500px) and (max- 600px){
.duoYong ul li a div {
2.3rem;
}
.duoYong ul li a .maiDan {
background: url("../images/bot_menu.jpg") -10px 0;
}

.duoYong ul li a .youHui {
background: url("../images/bot_menu.jpg") -180px 0;
}

.duoYong ul li a .diTu {
background: url("../images/bot_menu.jpg") -320px 0;
}

.duoYong ul li a .woDe {
background: url("../images/bot_menu.jpg") -490px 0;
}
}
@media screen and (min- 400px) and (max- 500px){
.duoYong ul li a div {
1.8rem;
}
.duoYong ul li a .maiDan {
background: url("../images/bot_menu.jpg") -40px 0;
}

.duoYong ul li a .youHui {
background: url("../images/bot_menu.jpg") -180px 0;
}

.duoYong ul li a .diTu {
background: url("../images/bot_menu.jpg") -350px 0;
}

.duoYong ul li a .woDe {
background: url("../images/bot_menu.jpg") -500px 0;
}
}

这是哪个页面的4个图片为了那4个图片能在不断的缩小的途中也跟着缩小所以在不写js代码后我这样写,由于div的宽度是固定的所以要不断的改变div的宽度。

原文地址:https://www.cnblogs.com/l979662050/p/5035740.html