css - 关于移动端定位position准确的问题？

Question

这样的一张图，需要放8个按钮对应八个地图位置，在不同尺寸的移动端设备上，图的宽度可能会发生变化。

1. 按钮的position定位如何自适应准确？

2. 按钮的宽高如何定？

求教解决方案。

Answer 1

1. How did you draw your map?
2. If it is an ordinary p, it is ok to use relative positioning and absolute positioning
3. If it is drawn on canvas, just draw the corresponding copy prompt through x, y coordinates

Answer 2

Try using percentage targeting

Answer 3

It is recommended to use canvas coordinates for positioning, which is more accurate

Answer 4

It is recommended to use rem units, margin percentage + position positioning has compatibility issues in mobile UC browsers

Answer 5

1. Use <meta name="viewport"> to define the device width
2. Use position, and then calculate the percentage position

Answer 6

What I understand about the question you asked is mobile terminal adaptation. There are many solutions. The rem solution used by Taobao is more recommended. For specific practices, you can refer to the multi-screen adaptation problem mentioned in this article.
http://www.html-js.com/articl...