javascript - 调整浏览器大小时页面内容(按钮、图像等)消失

Question

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

http://philome.la/gapp06gt/c3gua9/play

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

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

@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 .我建议只在标题文本上使用它，而不是较小的正文副本。作者甚至对此发出警告:“你敢让我们抓到你在段落文本上使用 FitText。这仅适用于巨大的显示文本!”