Solução de design responsivo à prova de idiotas

Usando javascript e matemática simples, sem usar propriedades baseadas em porcentagem, você pode carregar o mesmo layout básico em qualquer tamanho de tela em que o usuário estiver navegando.

Isso você pode fazer com o posicionamento absoluto usando px.

Abaixo está o algoritmo básico. Você define um tamanho de tela de destino e reajusta a posição com base na diferença percentual entre esse tamanho e o tamanho da tela do usuário.

var Layout = function(){
  this.targetX=960;
  this.targetY=527;
  this.resultX=0;
  this.resultY=0;
  this.compute= function(x,y){
    var reX = x-this.targetX;
    var reY = y-this.targetY;
    var teX = reX+this.targetX;
    var teY = reY+this.targetY;
    this.resultX=teX/this.targetX;

  };
};

var layout = new Layout;
layout.compute(winWidth,winHeight);

Abaixo estão as coordenadas dos elementos que correspondem à sua largura / altura alvo.

var mapXOne =   [430,540,620
          ];

var mapYOne =   [200,200,200

          ];

Agora redefina as coordenadas xey.

for(var i=0;i<mapXOne.length;i++){
  mapXOne[i]= mapXOne[i]*layout.resultX;
}
for(var i=0;i<mapYOne.length;i++){
  mapYOne[i]= mapYOne[i]*layout.resultY;
}

Finalmente, você pode aplicar essas coordenadas aos elementos.