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

在更改浏览器大小时，我遇到了一些问题，因为内容开始出错。我做了一些研究并尝试使用包装器，但我想不出来。调整浏览器大小时，如何缩放页面内容

正文{
背景色：#DCDC；
背景大小：98%；
背景重复：重复-y；
背景位置：中心；
}
#包装纸{
宽度：100%；
最大宽度：100%；
显示：块；
身高：100%；
最大高度：100%；
}
tw链路{
宽度：40%；
填充：1.5em；
保证金：自动；
边界：山脊#191970 0 0.4em；
边界半径：0.2米；
字体系列：Verdana；
字体大小：0.75rem；
颜色：#000；
文本对齐：居中；
背景色：#fff；
}
tw通道{
宽度：100%；
填料：2米；
保证金：自动；
边框：实心#000 0.05em；
边界半径：0.2米；
字体系列：Lucida控制台；
字体大小：1.5rem；
颜色：#000；
文本对齐：左对齐；
背景色：#fff；
盒影：0.2米0.2米0；
*{边距：0；
填充：0；
}}
tw图标{
不透明度：1；
颜色：红色；
}
tw侧边栏{
颜色：；
边界：；
垫底：0.8em；
边界半径：25%；
背景图像：；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
}

您可能希望查看

您可以使用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。这只适用于巨大的显示文本！”

因此我仔细查看了你的代码，没有发现一件事。在

tw align

上，您有

最大宽度：50%

。有什么原因吗？如果没有，请在所有

tw-align

上将其更改为

max width:100%

---

在700px分辨率上，您应该将

tw通道的填充减少到
1em
或其他内容，并且您的内容应该是响应性的。
问题太广泛，有太多有效的解决方案。你应该解释一下你想要它看起来像什么，然后我们可以帮助
tw story
，
tw passage
，
tw align
和
tw expression
都不是有效的HTML元素。我建议将
div
元素与类一起使用，如下所示：
@JuanMendes我只是想让浏览器缩小页面以保持其原始外观，这意味着所有内容同时变小too@MarkPlewis我正在使用一个在线游戏主页（twinery.org）这就是为什么需要在css中输入它来保持语法。我已经看到了，我相信它应该是定位固定的，但仍然不起作用。几乎明白了。。对于.img元素，我如何只为一个特定的图像而不是所有的图像指定大小等？向
img
元素添加
class
或
id
属性，如下所示：
，然后使用该标识符在CSS中选择它，如下所示：
#我的照片{宽度：100%；高度：auto；}
非常感谢ypu@MarkPlewis，完成了。我使用了如您所示的img属性和主体的最大宽度、最小宽度的组合。