英文:

Issue with my CSS and making my game look the same and user-friendly on different screen sizes

问题

.grid {
  width: 200px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(8, 8, 0);
  margin-left: 850px;
  border-top: 10px solid #00ffff;
  border-bottom: 10px solid #00ffff;
  border-left: 10px solid #00ffff;
  border-right: 10px solid #00ffff;
  border-radius: 10px;
  box-shadow: 0 0 20px #00ffff;
  animation: pulse 2s ease-in-out infinite;
}

.mini-grid {
  margin-left: 90px;
  margin-top: 320px;
  width: 80px;
  height: 80px;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(7, 7, 7);
  border-top: 10px solid #00ffff;
  border-bottom: 10px solid #00ffff;
  border-left: 10px solid #00ffff;
  border-right: 10px solid #00ffff;
  border-radius: 5px;
  box-shadow: 0 0 10px #00ffff;
  animation: pulse 2s ease-in-out infinite;
}

.container {
  display: flex;
  position: absolute;
}

.grid div {
  height: 20px;
  width: 20px;
}

.shape {
  background-color: rgb(233, 233, 241);
}

.footer {
  position: absolute;
  bottom: 150px;
  left: 770px;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  text-shadow: 2px 2px #000000;
  font-size: 14px;
}

h1 {
  text-align: center;
  font-size: 50px;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  text-shadow: 2px 2px #000000;
  top: 200px;
}

h2 {
  position: absolute;
  bottom: 100px;
  right: 5px;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  text-shadow: 2px 2px #000000;
  font-size: 14px;
}

h3 {
  position: absolute;
  bottom: 200px;
  right: 845px;
  font-size: 30px;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  text-shadow: 2px 2px #000000;
}

.rules {
  position: absolute;
  bottom: 500px;
  left: 260px;
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  text-shadow: 2px 2px #000000;
  font-size: 14px;
}

body {
  background-color: #000000;
  background-image: url('wallpaperflare.com_wallpaper.jpg');
  background-position: 300px 80px;
  background-size: cover;
}

.score {
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  text-shadow: 2px 2px #000000;
  font-size: 18px;
}

.level {
  font-family: 'Press Start 2P', cursive;
  color: #FFFFFF;
  text-shadow: 2px 2px #000000;
  font-size: 18px;
}

#start-button {
  background-color: #e91f1f;
  font-family: 'Press Start 2P', cursive;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
  margin-left: 600px;
  margin-bottom: 10px;
}

#level {
  background-color: #2e6e1b;
  font-family: 'Press Start 2P', cursive;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
  margin-right: 0px;
  margin-bottom: 50px;
}

#level7 {
  background-color: #e29750;
  font-family: 'Press Start 2P', cursive;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
  margin-right: 0px;
  margin-bottom: 50px;
}

#refresh-button {
  background-color: #923385;
  font-family: 'Press Start 2P', cursive;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

#refresh-button:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

audio {
  background-color: #086910;
  font-family: 'Press Start 2P', cursive;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 300px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
  position: fixed;
  bottom: 150px;
  right: 20px;
}

audio source {
  display: none;
}

audio::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #130707 transparent;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);


<details>
<summary>英文:</summary>

Running into a big issue with my game when I switch devices. Tried playing around with FlexBox but every step I take I make the situation worse. My project is due in a few days: what should I do? Easy fixes you can recommend? Anything I can do to change it and making it more responsive on different screens? THANKS

.grid {
width: 200px;
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: rgb(8, 8, 0);
margin-left: 850px;
border-top: 10px solid #00ffff;
border-bottom: 10px solid #00ffff;
border-left: 10px solid #00ffff;
border-right: 10px solid #00ffff;
border-radius: 10px;
box-shadow: 0 0 20px #00ffff;
animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
0% {
box-shadow: 0 0 90px #da0dcf;
}
50% {
box-shadow: 0 0 40px #00ffff;
}
100% {
box-shadow: 0 0 20px #00ffff;
}
}

.mini-grid {
margin-left: 90px;
margin-top: 320px;
width: 80px;
height: 80px;
display: flex;
flex-wrap: wrap;
background-color: rgb(7, 7, 7);
border-top: 10px solid #00ffff;
border-bottom: 10px solid #00ffff;
border-left: 10px solid #00ffff;
border-right: 10px solid #00ffff;
border-radius: 5px;
box-shadow: 0 0 10px #00ffff;
animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
0% {
box-shadow: 0 0 90px #da0dcf;
}
50% {
box-shadow: 0 0 20px #00ffff;
}
100% {
box-shadow: 0 0 10px #15ff00;
}
}

.mini-grid div {
height: 20px;
width: 20px;
}
.container {
display: flex;
position: absolute;
}

.grid div {
height: 20px;
width: 20px;
}

.shape {
background-color: rgb(233, 233, 241);
}

.footer {
position: absolute;
bottom: 150px;
left: 770px;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
font-size: 14px;
}

h1 {
text-align: center;
font-size: 50px;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
top: 200px;
}

h2{
position: absolute;
bottom: 100px;
right: 5px;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
font-size: 14px;
}

h3 {
position: absolute;
bottom: 200px;
right: 845px;
font-size: 30px;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
}

.rules {
position: absolute;
bottom: 500px;
left: 260px;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
font-size: 14px;

}

body {
background-color: #000000;

background-image: url('wallpaperflare.com_wallpaper.jpg');
background-position: 300px 80px;
background-size: cover;
}

.score {
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
font-size: 18px;

}

.level {
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
font-size: 18px;
}

#start-button {
background-color: #e91f1f;
font-family: 'Press Start 2P', cursive;
border: none;
color: #fff;
font-size: 14px;
padding: 8px 16px;
cursor: pointer;
border-radius: 30px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
margin-left: 600px;
margin-bottom: 10px;

}

#start-button:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.shape {
border-radius: 8px;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

#level {
background-color: #2e6e1b;
font-family: 'Press Start 2P', cursive;
border: none;
color: #fff;
font-size: 14px;
padding: 8px 16px;
cursor: pointer;
border-radius: 30px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
margin-right: 0px;
margin-bottom: 50px;

}

#level:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
#level7 {
background-color: #e29750;
font-family: 'Press Start 2P', cursive;
border: none;
color: #fff;
font-size: 14px;
padding: 8px 16px;
cursor: pointer;
border-radius: 30px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
margin-right: 0px;
margin-bottom: 50px;

}

#level7:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

#refresh-button {
background-color: #923385;
font-family: 'Press Start 2P', cursive;
border: none;
color: #fff;
font-size: 14px;
padding: 8px 16px;
cursor: pointer;
border-radius: 30px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
}

#refresh-button:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

audio {
background-color: #086910;
font-family: 'Press Start 2P', cursive;
border: none;
color: #fff;
font-size: 14px;
font-weight: 300px;
padding: 8px 16px;
cursor: pointer;
border-radius: 30px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
position: fixed;
bottom: 150px;
right: 20px;
}

audio source {
display: none;
}

audio::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #130707 transparent;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
}

audio::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 10px 0 10px;
border-color: #141313 transparent transparent transparent;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}

audio::-webkit-media-controls-panel {
background-color: rgb(88, 223, 110);
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider {
display: rgb(238, 236, 236);
}

audio::-webkit-media-controls-volume-slider-container {
width: 100px;
}

audio::-webkit-media-controls-volume-slider {
height: 10px;
border-radius: 5px;
background-color: #110e0e;
}

audio::-webkit-media-controls-volume-slider-thumb {
background-color: #FFFFFF;
border: none;
border-radius: 50%;
width: 15px;
height: 15px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
}

</details>
# 答案1
**得分**: 1
以下是翻译好的部分：
1. 使用相对单位：不要使用固定像素值来设置宽度、高度、边距和填充，而是使用相对单位，如百分比、em或rem。这将确保您的游戏适应不同的屏幕尺寸。
2. 使用媒体查询：您可以使用媒体查询来为不同的屏幕尺寸定义不同的样式。例如，您可以为小于768px的屏幕、768px到992px之间的屏幕以及大于992px的屏幕定义不同的样式。
但如果时间紧迫，可以尝试使用CSS框架，如Bootstrap，帮助您快速创建响应式布局。
<details>
<summary>英文:</summary>
It will be hard to provide a specific solution to your question without the HTML structure and the screenshots of the desired look for each screen size. What I could recommend that can help you make your game more responsive:
1. Use relative units: Instead of using fixed pixel values for width, height, margin, and padding use relative units such as percentages, em, or rem. This will ensure that your game adapts to different screen sizes.
2. Use media queries: You can use media queries to define different styles for different screen sizes. For example, you can define different styles for screens smaller than 768px, screens between 768px and 992px, and screens larger than 992px.
But if time is of the essence try to use a CSS framework such as Bootstrap to help you create a responsive layout quickly.
</details>