调整浏览器大小时页面内容（按钮、图像等）消失

Question

我在更改浏览器大小时遇到了问题，因为内容开始消失了。我做了一些研究并尝试使用#wrapper，但我无法弄清楚。调整浏览器大小时如何缩放页面内容？

body {
  background-color: #DCDCDC;
  background-size:98%;
  background-repeat: repeat-y;
  background-position:center;
}

#wrapper {
  width: 100%;
  max-width: 100%;
  display: block;
  height: 100%;
  max-height: 100%;
}

tw-link {
  width: 40%;
  padding: 1.5em;
  margin: auto;
  border: ridge #191970 0.4em;
  border-radius: 0.2em;
  font-family: Verdana;
  font-size: 0.75rem;
  color: #000;
  text-align: center;
  background-color: #fff;
}

tw-passage {
  width: 100%;
  padding: 2em;
  margin: auto;
  border: solid #000 0.05em;
  border-radius: 0.2em;
  font-family: Lucida Console;
  ;font-size: 1.5rem;
  color: #000;
  text-align: left;
  background-color: #fff;
  box-shadow: #000 0.2em 0.2em 0;
  *{margin: 0;
  padding: 0;
}}

tw-icon {
  opacity: 1;
  color: red;
}

tw-sidebar {
  color:;
  border:;
  padding-bottom: 0.8em;
  border-radius: 25%;
  background-image:;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Answer 1

您可能想查看 position property

Answer 2

您可以使用 CSS 媒体查询来逐渐加宽您的容器并减少它的填充，因为视口变得更窄。这个想法是让布局适应每个屏幕尺寸最合适的布局，所以简单地缩小整个布局并不一定是理想的。

@media all and (max-width: 1000px) {
  tw-story { width: 70%; }
  tw-passage { padding 5%; }
}
@media all and (max-width: 850px) {
  tw-story { width: 80%; }
}
@media all and (max-width: 750px) {
  tw-story { width: 90%; }
}
/* etc. */

您还可以使 img 元素具有响应性，如下所示：

img {
  width: 100%;
  height: auto;
}

如果您不想使用媒体查询来逐步更改文本的大小，那么您可以尝试 FitText jQuery plugin。我建议只在标题文本上使用它，而不是较小的 body 副本。作者甚至对此发出警告："Don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!"

Answer 3

所以我仔细查看了您的代码，但一无所获。在 tw-align 你有 max-width:50%。有什么理由吗？如果不是，请在所有 tw-align.

上将其更改为 max-width:100%

在 700 像素的分辨率下，您应该将 tw-passage 的内边距减少到 1em 或其他，并且您的内容应该是响应式的。

调整浏览器大小时页面内容（按钮、图像等）消失

Content of page (buttons, images, etc.) goes off when browser is resized

html

javascript

css

wrapper