How can i make my game responsive?

Im making a 2d multiplayer turn based strategy game based on chess, advance wars and civ combat. I want to be able to set a size for the game window, and have the board resize and fit inside this game window no matter what. This way i could set the game window to something like 1920x1080 on pc and 100% width on mobile (or something like that). But how should i do this? another problem is that im going to add units and buildings on the board, so these have to resize and scale too. how can i do this? all i want to do is to be able to set the size of the game window/board as i want and have everything looking the way it should without stretching etc. The board is a hexagon grid composed by sprites of different hexagons. Is it possible to first make the board into an “object” and then resizing it within the window. Or do i have to do some math stuff to resize each tile and then placing them together etc. Also is it stupid to separately resize the board? then it would probably be hard to place and resize the units etc. How can i achieve what i want?

You can use media query of CSS (the code below are generated by Copilot of win 11)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8"/>
    <style>
        div {
            max-width: 1920px;
            max-height: 1080px;
            width: 100%;
            height: 100%;
        }
        @media screen and (max-width: 1080px) {
            div {
                width: 100%;
            }
        }
        @media screen and (max-height: 1920px) {
            div {
                height: 100%;
            }
        }
        @media screen and (max-width: 768px) {
            div {
                width: 100%;
                height: 100%;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

You can put the canvas in this div.