Responsive Design Q#1

I listed this as Q#1 because I anticipate having more similar questions. Normally, when I just place a div over the top of another div using absolute position, the position of the element becomes severely displaced when zooming in and out. In the video, Drew mentions he queries the pixel size. Is this how he gets the dpad to stay perfectly in place?
.corner_topleft,
.corner_topright,
.corner_bottomleft,
.corner_bottomright {
position: absolute;
width: var(--pixel-size);
height: var(--pixel-size);
background: var(--bg);
z-index:2;
}

.corner_topleft {
top: calc(var(--pixel-size) * -1);
left: calc(var(--pixel-size) * -1);
.corner_topleft,
.corner_topright,
.corner_bottomleft,
.corner_bottomright {
position: absolute;
width: var(--pixel-size);
height: var(--pixel-size);
background: var(--bg);
z-index:2;
}

.corner_topleft {
top: calc(var(--pixel-size) * -1);
left: calc(var(--pixel-size) * -1);
If so, can you explain more about what the
var(--pixel-size)
var(--pixel-size)
and
calc(var(--pixel-size) * -1)
calc(var(--pixel-size) * -1)
are doing. If not, or if there are other methods, can you please share an explanation. I do not want to copy and paste other people's code without understanding how it works. I want to dissect and study it, so I can write my own snippet with my own terminology. Drew Conly's Code on Codepen https://codepen.io/punkydrewster713/full/WNrXPrb
Drew Conley
CodePen
Top Down 2D Game Camera
Here's a method for creating a camera illusion for top down web games. This Pen covers arrow key movement and camera following. Video Tutorial here: h...
KP
Kevin Powell38d ago
So, gonna do a little experiment with my answer here, where I've done it in video 😄 - I hope I understood you're question 😆 If it answers your question, and also, if you're okay with it, I'll record a little intro/outro and make it into a YT video. If not, it's all good as well 🙂
B
bluestreak71138d ago
So right off that is extremely helpful and after this is all said and done, I would highly recommend you up it to YT. I think I may have some follow up questions, but I need to watch your video a few more times and take some notes. Drew's jQuery for the screen size was so few that I missed that part. If I am correct, he only used two queries for the screen size. In my past experience, most people have to query the screen size for the most subtitle changes which ends up being dozens upon dozens to fine tune web pages. I do not quite understand how Drew got away with only two queries.
KP
Kevin Powell35d ago
He sort of just ended up doing a "small", "medium", and "large" size. Since it's just a square, and everythign scales with it thanks to that custom property, he's just making it get bigger at set points and not worrying about it too much from what I can see. A big part is having the scale of everything linked to that custom property though