CSS+Bootstrap实现5x5瓷砖网格移动端过高、行拉伸问题求解

针对你遇到的两个布局问题，核心通过固定瓷砖宽高比、优化容器响应式规则解决，具体修改如下：

核心改动点 #

• 给瓷砖类添加aspect-ratio: 1/1强制宽高比为1:1，无论视口大小、内部是否有内容，所有瓷砖都会保持正方形，从根源解决高度被拉伸、移动端瓷砖过高的问题
• 给瓷砖添加align-items: center让内部内容垂直居中，可选添加overflow: hidden避免内容溢出破坏布局，建议内部文本不要使用过大的默认标签（如<h1>自带大字号），可以自定义字体大小适配瓷砖尺寸
• 外层容器删除固定高度height: 1000px，改为由内部内容自动撑开，保留最大宽度限制保证大屏不会过宽

优化后CSS代码 #

#mines-field {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  max-width: 1200px;
  /* 可选：如果需要整体场地也保持正方形，添加下面一行 */
  /* aspect-ratio: 1/1; */
}

.mines-card {
  flex: 0 1 calc(20% - 8px);
  margin: 4px;
  background-color: rgb(92, 92, 214);
  /* 新增以下属性 */
  aspect-ratio: 1/1;
  align-items: center;
  overflow: hidden;
}

修改后无需改动HTML结构，所有瓷砖会始终保持等大正方形，响应式切换尺寸时比例完全一致，单个瓷砖有内容也不会拉伸整行高度。

内容的提问来源于stack exchange，提问作者sharpness