Html/CSS Layout verschiebt sich durch zoomen

TheRealAmex · 24. November 2022

Hallo,

Ich möchte ein kleines Spiel per Html/Css gestalten und habe dafür ein quadratisches Rechteck ausgewählt.
Bei 100% sieht dies auch in Ordnung aus, jedoch werden beim rein oder rauszoomen die Zellen verschoben.
Problem daran ist das es möglich sein sollte auch mobil, einwandfrei darauf zugreifen zu können.
Die Frage gab es bestimmt schon einmal, jedoch haben die im Netz stehenden Tipps, nicht geholfen.

Danke im voraus

floq0r · 24. November 2022

no code, no support

TheRealAmex · 24. November 2022

css:

*{
margin: 0;
padding: 0;
}
:root{
--title-color: #0511F2;
--footer-color: #c22222;
--background-color: #c7c7c7;
--shadowsize: 4px;
--highlightcolor: #3333333f;
--shadowcolor: #3a3a3a00;
--cellcolor:#b6b6b6;

}
html, body {
height : 100%;
width: 100%;
box-sizing: border-box;

}

#playfield {
height: min(50vw, 50vh);
width: min(50vh, 50vw);
margin: 0 auto;
background-color: var(--background-color);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content:space-around;
box-sizing: content-box;
}

header{
height: min(5vw, 5vh);
width: min(50vh, 50vw);
background-color: #d6d6d6;
margin: 0 auto;

}
.cell {
height: min(50px);
width: min(50px);
background-color: #b6b6b6;
flex-shrink: 0;
justify-items:right;
border-bottom: var(--shadowsize) solid var(--highlightcolor);
border-right: var(--shadowsize) solid var(--highlightcolor);
border-top: 4px solid #ececec;
border-left: 4px solid #ececec;
box-sizing: border-box;
}
/*.covered{
height: min(50px);
width: min(50px);
border-right: 4px solid var(--shadowcolor);
border-bottom: 4px solid var(--shadowcolor);
background-color: #000000;
box-sizing: border-box;
*/
}

footer{
height: min(5vw, 5vh);
width: min(50vh, 50vw);
background-color: var(--background-color);
margin: 0 auto;

}

html:
<!DOCTYPE html>
<div lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="styles.css">
<title> L</title>
</head>
<body>
<header>
<h1>Minesweeper</h1>
</header>
<div id= "playfield">
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>
<div class = "cell" ></div>

</div>
<div class="button"></div>
<footer>© 2022 by</footer>
</body>
</html>

floq0r · 24. November 2022

Du musst dich zunächst dafür entscheiden ob das Spielfeld überhaupt responsive sein soll (ob es seine Größe ändert oder beibehält). Wenn es responsive sein soll wirst du die Breite von .cell prozentual angeben müssen, das erfordert wegen der Höhe dann noch eine Trickserei mit padding-top: 100%; oder so, müsste mich wieder einlesen.

Edit: In diesem Fall wäre display: grid; wie geschaffen.

Der Lord · 24. November 2022

@TheRealAmex Es ist unnötig anstrengend wenn man Code ohne Formatierung debuggen soll...

Nach 6 Jahren sollte man die Funktion doch mal in Aktion gesehen haben.

floq0r · 24. November 2022

Ich hab da mal was schönes gebastelt:

CSS:

#playfield
{
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   height: 50vw;
   width: 50vw;
}

.cell
{
    height: calc(50vw / 9);
    width: calc(50vw / 9);
}

Den restlichen Style kannst du so lassen wie er ist.

TheRealAmex · 24. November 2022

Ahh, ich bin nicht darauf gekommen die Zellen abhängig vom Viewport zu machen. Vielen Dank.

Suche

Html/CSS Layout verschiebt sich durch zoomen

TheRealAmex

Cadet 4th Year

floq0r

Commander

TheRealAmex

Cadet 4th Year

floq0r

Commander

Der Lord

Lt. Commander

floq0r

Commander

TheRealAmex

Cadet 4th Year

Ähnliche Themen