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

【问题标题】：Content of page (buttons, images, etc.) goes off when browser is resized调整浏览器大小时页面内容（按钮、图像等）消失
【发布时间】：2015-11-11 16:36:47
【问题描述】：

我在更改浏览器大小时遇到了问题，因为内容开始消失。我已经做了一些研究并尝试使用#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;
}

【问题讨论】：

问题太宽泛，有效解决方案太多。您应该说明您希望它的外观，然后我们可以提供帮助
tw-story、tw-passage、tw-align 和 tw-expression 不是有效的 HTML 元素。我建议将div 元素与类一起使用，如下所示：<div class="tw-story"></div>。
@JuanMendes 我只是希望有人让浏览器缩小页面以保持其原始外观，这意味着所有内容也同时变小
@MarkPlewis 我正在使用在线游戏基础页面 (twinery.org)，这就是需要在 css 中输入以保持语法的方式

标签： javascript html css wrapper

【解决方案1】：

随着视口变得更窄，您可以使用 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。我建议仅在标题文本上使用它，而不是在较小的正文中使用。作者甚至对此发出警告：“你敢让我们在段落文本上使用FitText，这仅用于巨大的显示文本！”

【讨论】：

几乎明白了.. 使用 .img 元素，我如何只为一个特定图像而不是所有图像指定大小等？
将class 或id 属性添加到您的img 元素中，例如：<img id="my-photo">，然后使用该标识符在您的CSS 中选择它，例如：#my-photo { width: 100%; height: auto; }跨度>
非常感谢@MarkPlewis，完成了。我使用了您所指出的 img 属性和 max-width, min-width:to 主体的组合。

【解决方案2】：

您可能想查看position property

【讨论】：

我已经看到了，我相信它应该定位固定但仍然不起作用

【解决方案3】：

所以我查看了您的代码，但我没有得到任何东西。在tw-align 你有max-width:50%。有什么理由吗？如果不是，请将所有tw-align 上的max-width:100% 更改为max-width:100%。

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

【讨论】：