背景图上有许多可点击的位置，这些位置都要换成div，随着手机设备的变化，精准的显示到各个位置。求解

Question

根据需求，是有一个背景图，上面要有很多可点击的位置，或设置成div，或者是个图片(图片已经排除，因为考虑到加载，就是背景图上让div精准的定位到图片上各个不同的位置，点击时显示不同的东西)，求各位大佬解决下。谢谢

Answer 1

你的需求是：一张图片有几个点，不同设备这些点的位置可能有偏差！

• 如果「点」不密集

可以使用扩大点击范围的方法（移动端一般会增加点击面积哈）。保证「点」在「圈」内就容易多了

• 点很密集

生成map表，比如以宽度「可变」算:

• 图上点的位置为： [100, 100], [200, 100]
• 图片宽度为640
• 设备宽度由window.clientWidth获取

计算设备和原图比例，计算出点的位置

// 1. 计算得出缩放比
var scale = 0.9;

var pixelMap = {
    '100x100': [100 * 0.9, 100*0.9]
};

// 2. 根据pixelMap生成「点击点」

Answer 2

试试图片热点

Answer 3

canvas 实现的画会不会有点难

Answer 4

用rem布局，用定位就可以解决，