调整浏览器大小时，页面内容(按钮、图像等）会关闭

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

本文关键字：图像 按钮 小时 浏览器 调整      更新时间：2023-09-26

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

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

您可能需要查看仓位属性

所以我仔细看了一下你的代码，一点也不明白。在tw-align上有max-width:50%。有什么原因吗？如果没有，则在所有tw-align上将其更改为max-width:100%。

在700px分辨率上，您应该将tw-passage的填充减少到1em或其他内容，并且您的内容应该是有响应的。

相关文章：