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

Question

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

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

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

Answer 1

在您的 .dashboard class 中，您将间隙设置为 1rem。列间距和行间距的间距属性为 shorthand。由于 column-gap 设置为 1rem，您的页面偏离了中心。您还应该考虑在较小的屏幕上更改 .x class 上的固定宽度。修复后您的布局不会中断。

.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 正在缩小以响应减小的屏幕宽度

HTML Element/Div is narrowing in response to decreased screen width

html

css

flexbox

responsive-design