使另一个图像作为响应

Question

我想将箭头定位在车轮上。

指针应始终指向100和30之间的空白。

我从以下代码开始：

@media only screen and (min-width: 1200px) {
    #pin {
        left: 46%;
        background: green;
    }
}
@media only screen and (max-width:1100px) {
    #pin {
        left: 45%;
        background: blue;
    }
}
@media only screen and (max-width:769px) {
    #pin {
        left: 44.7%;
        background: yellow;
    }
}

您可以在此处找到JS小提琴： https://jsfiddle.net/jb386rfn/

问题是我需要为每个像素设置很多CSS规则。

这非常重要，因为指针应该指向正确的价格。

感谢您的帮助。