Posicionar puntos en pantalla

[cristianpark]

Hola a todos, estoy haciendo una página donde se deben seleccionar los jugadores de diferentes alineaciones. Se seleccionan con puntos dispuestos en la forma de la formación seleccionada (4-4-3, 4-4-1-2, etc) lo que estoy haciendo es ubicarlos con posición absoluta y establecer su posición con márgenes superior y derecha, logro un posicionamiento consistente y adecuado pero para resoluciones bajas de celulares [1], para tablets o computadores se ven muy arriba y pequeños [2].

Lo que estoy haciendo básicamente es tener un vector [3] con las posiciones de cada formación (4 en total) y el vector tiene índices de cada línea (defensa, medio campo, ataque), cada línea tiene un vector con strings del tipo "11_12" que definen que este elemento tiene un top de 11em y un right de 12em; estos valores fueron calculados por ensayo y error de forma que las alineaciones tuvieran la forma correcta.

Posteriormente recorro este vector en JavaScript para ubicar los puntos en un contenedor con jQuery, espero entiendan el código, es esto lo que estoy haciendo [4]

Me gustaría saber si me pueden dar algunos tips para organizar mejor los puntos de forma que dependiendo la resolución no queden tan arriba, me imaginaba poner un media query que le sumara 5 o 10em a la posición de los puntos (todos tienen una clase común) pero no encontré cómo hacer esto, por ahora lo único que algo es que al cambiar la orientación del dispositivo a landscape, el tamaño de cada punto sea un poco más grande que cuando se visualiza portrait

Gracias por la ayuda (si llegaron hasta este punto del post jeje)

PD: El código está en inglés porque lo necesito así para hacer la entrega dado que la app debe estar en esp-eng

[1] http://i.imgur.com/O508Ltf.png
[2] http://i.imgur.com/mHaKegN.png
[3] http://pastebin.com/b5sRGNYM
[4] http://pastebin.com/DbUWhRek