触发媒体查询时如何阻止元素移动？

Question

I'm a complete novice at coding.我是编码的新手。

I am styling a recent project for a course I have worked on.我正在为我从事的一门课程设计一个最近的项目。 I have put in a media query to change the properties of the H1 and Controls class.我已经输入了一个媒体查询来更改 H1 和控件 class 的属性。 However, when I resize the browser to trigger the media query, it is also moving the button and score out of place.但是，当我调整浏览器的大小以触发媒体查询时，它也会将按钮和得分移动到不合适的位置。 Is there a reason it is doing this and how do I fix it?它这样做是有原因的，我该如何解决？

Many thanks in advance!提前谢谢了！

Ray射线

<head>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<div class='mobile'>
  <div class="info">
   <h1>Snake Game</h1>
   <button id="start">Lets go!</button>
   <h2>Score <span id="score"></span></h2>
 </div>
 <div class="grid"></div>
 <div class="nokia"></div>
 <div class="controls">
   <h3>Controls</h3>
 
     <ul><span class="direction">Up</span> - Up arrow key</ul>
     <ul><span class="direction">Right</span> - Right arrow key</ul>
     <ul><span class="direction">Down</span> - Down arrow key</ul>
     <ul><span class="direction">Left</span> - Left arrow key</ul>
   
 </div>
</div>

<script src="main.js"></script>
</body>

    .mobile {
  display: flex;
  justify-content: center;

}

.nokia {
  position: absolute;
  top: 190px;
  display: block;
  width: 700px;
  height: 983px;
  background-image: url("https://i.imgur.com/3SeVxgS.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.controls {
  position: absolute;
  top: 100px;
  display: flex;
  
  
}
@media (max-width: 930px) {
  .controls {
    top: 50px;
    display: block;
    font-size: 70%;
  }

h1 {
  font-size: 20px;
}
}

.grid {
  position: absolute;
  top: 420px;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  background-color: white;
}

.info {
  position: absolute;
  z-index: 9999;
  top: 0;
  text-align: center;
}


h2 {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  position: absolute;
  top: 750px;
  left: 40px;

}

button {
  position: absolute;
  top: 663px;
  left: -5px;
  height: 64px;
  width: 172px;
  border-style: solid;
  border-bottom: 50px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  font-size: 20px;
  outline: none;
}

button:active {
transform: translateY(2px);

}



.square {
  width: 20px;
  height: 20px;
}

.snake {
  background-color:#12c258
}

.apple {
  background-color: red;
  border-radius: 20%;
  height: 20px;
  width: 20px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.35);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  50% {
    transform: scale(1);
/*     box-shadow: 0 0 0 10px #12c258; */
  }

  100% {
    transform: scale(0.35);
/*     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); */
  }
}

const grid = document.querySelector(".grid");
const startButton = document.getElementById("start");
const scoreDisplay = document.getElementById("score");
let squares = [];
let currentSnake = [2, 1, 0];
let direction = 1;
const width = 10;
let appleIndex = 0;
let score = 0;
let intervalTime = 1000;
let speed = 0.9;
let timerId = 0;

function createGrid() {
  //create 100 of these elements with a for loop
  for (let i = 0; i < width * width; i++) {
    //create element
    const square = document.createElement("div");
    //add styling to the element
    square.classList.add("square");
    //put the element into our grid
    grid.appendChild(square);
    //push it into a new squares array
    squares.push(square);
  }
}
createGrid();

currentSnake.forEach(index => squares[index].classList.add("snake"));

function startGame() {
  //remove the snake
  currentSnake.forEach(index => squares[index].classList.remove("snake"));
  //remove the apple
  squares[appleIndex].classList.remove("apple");
  clearInterval(timerId);
  currentSnake = [2, 1, 0];
  score = 0;
  //re add new score to browser
  scoreDisplay.textContent = score;
  direction = 1;
  intervalTime = 1000;
  generateApple();
  //readd the class of snake to our new currentSnake
  currentSnake.forEach(index => squares[index].classList.add("snake"));
  timerId = setInterval(move, intervalTime);
}

function move() {
  if (
    (currentSnake[0] + width >= width * width && direction === width) || //if snake has hit bottom
    (currentSnake[0] % width === width - 1 && direction === 1) || //if snake has hit right wall
    (currentSnake[0] % width === 0 && direction === -1) || //if snake has hit left wall
    (currentSnake[0] - width < 0 && direction === -width) || //if snake has hit top
    squares[currentSnake[0] + direction].classList.contains("snake")
  )
    return clearInterval(timerId);

  //remove last element from our currentSnake array
  const tail = currentSnake.pop();
  //remove styling from last element
  squares[tail].classList.remove("snake");
  //add square in direction we are heading
  currentSnake.unshift(currentSnake[0] + direction);
  //add styling so we can see it

  //deal with snake head gets apple
  if (squares[currentSnake[0]].classList.contains("apple")) {
    //remove the class of apple
    squares[currentSnake[0]].classList.remove("apple");
    //grow our snake by adding class of snake to it
    squares[tail].classList.add("snake");
    console.log(tail);
    //grow our snake array
    currentSnake.push(tail);
    console.log(currentSnake);
    //generate new apple
    generateApple();
    //add one to the score
    score++;
    //display our score
    scoreDisplay.textContent = score;
    //speed up our snake
    clearInterval(timerId);
    console.log(intervalTime);
    intervalTime = intervalTime * speed;
    console.log(intervalTime);
    timerId = setInterval(move, intervalTime);
  }

  squares[currentSnake[0]].classList.add("snake");
}

function generateApple() {
  do {
    appleIndex = Math.floor(Math.random() * squares.length);
  } while (squares[appleIndex].classList.contains("snake"));
  squares[appleIndex].classList.add("apple");
}
generateApple();

// 39 is right arrow
// 38 is for the up arrow
// 37 is for the left arrow
// 40 is for the down arrow

function control(e) {
  if (e.keyCode === 39) {
    console.log("right pressed");
    direction = 1;
  } else if (e.keyCode === 38) {
    console.log("up pressed");
    direction = -width;
  } else if (e.keyCode === 37) {
    console.log("left pressed");
    direction = -1;
  } else if (e.keyCode === 40) {
    console.log("down pressed");
    direction = +width;
  }
}
document.addEventListener("keyup", control);
startButton.addEventListener("click", startGame);

Answer 1

The button and the score were in that "out of place" position by default but the "Snake Game" text was pushing it to the left, you can solve this issue by putting the "Snake Game" text out of the div that has the button in it.默认情况下，按钮和分数位于“不合适”的 position 但“Snake Game”文本将其推向左侧，您可以通过将“Snake Game”文本从具有里面的按钮。

触发媒体查询时如何阻止元素移动？

问题描述

1 个解决方案

解决方案1
0 2021-03-29 17:42:25

触发媒体查询时如何阻止元素移动？

问题描述

1 个解决方案

解决方案1 0 2021-03-29 17:42:25

解决方案1
0 2021-03-29 17:42:25