Question

我正在开发一种响应式设计，当屏幕比大约窄时会中断。 380 像素。问题似乎是整个 HTML 页面元素正在缩小和拖动子元素并使整个页面偏离中心 (see image)。我尝试使用断点来解决此问题，但是当进入非常小的屏幕尺寸时，我似乎无法使页面的 HTML 元素保持 100% 的宽度。

我觉得我缺少一些基本的东西，所以任何指出这一点的帮助都会有所帮助！

我的代码：https://github.com/thomaswalsh92/wordsearch

Answer 1

在您的 .dashboard 类中，您将间隙设置为 1rem。 Gap 属性是 column-gap 和 row-gap 的简写。由于 column-gap 设置为 1rem 您的页面不在中心。您还应该考虑在较小的屏幕上更改 .x 类的固定宽度。修复此问题后，您的布局不会中断。

.dashboard {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr) [21];
  grid-template-columns: repeat(21, 1fr);
  -ms-grid-rows: (minmax(32px, auto)) [3];
  grid-template-rows: repeat(3, minmax(32px, auto));
  gap: 1rem 0;
}

.word-board-section .word-board-container .x {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: auto;
  margin: 0 auto;
}

HTML Element/Div 正在缩小以响应减少的屏幕宽度

1 个答案: