Co to znaczy, ze skalowanie CSS nie działa z różnymi rozdzielczościami? Spójrz na mój przykład napisany tak na szybko:
<!doctype html>
<html>
<head>
<style>
#mainBox {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<div id="mainBox">
<div style="position:absolute;top:100px;left:200px;width:12px;height:12px;background:pink;"></div>
</div>
<script type="text/javascript">
var baseWidth = 1000;
var baseHeight = 500;
function scaleMainBox() {
var scale = window.innerWidth / baseWidth;
document.getElementById("mainBox").style.transform = "scale("+scale+")";
}
scaleMainBox();
window.addEventListener("resize", scaleMainBox);
</script>
</body>
</html>
Najpierw robisz sobie mainBox
o określonych stałych wymiarach (im większe tym lepiej) a później to skalujesz bazując na wielkości okna przeglądarki.
Co do problemu wybierania, zobacz sobie querySelector. Ogólnie działa to tak, że pewnej grupie obiektów nadajesz pewną klasę class="foo"
i dzięki temu możesz wybrać tylko te interesujące Cię elementy. Oczywiście każdy obiekt może posiadać więcej niż jedną klasę (class="foo bar"
).
Widzę, że masz kilka scen. Może lepiej byłoby zrobić w mainBox kilka div
ów .scene
z osobnymi id
a w JS możesz ustawiać .css.display = "none";
żeby schować scenę lub .css.display = "block";
, żeby scenę pokazać.