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

I'm encountering issues when it comes to changing the browser size because the content starts going off. I've done some research and tried with #wrapper but I cant' figure it out. How do I do to scale my page content when the browser is resized?

我在改变浏览器大小时遇到了问题,因为内容开始流行。我已经完成了一些研究并尝试使用#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;
}

3 个解决方案

#1

You can use CSS media queries to progressively widen your container and reduce it's padding, as the viewport becomes more narrow. The idea is to adapt the layout to whatever is most appropriate for each screen size, so simply scaling down your entire layout isn't necessarily ideal.

随着视口变得更窄,您可以使用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. */

You can also make the img elements responsive, like this:

您还可以使img元素响应,如下所示:

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

If you don't want to use media queries to progressively change the size of your text, then you could try the FitText jQuery plugin. I recommend only using this on heading text through, not your smaller body copy. The author even issues a warning against this: "Don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!"

如果您不想使用媒体查询逐步更改文本大小,那么您可以尝试使用FitText jQuery插件。我建议仅在标题文本中使用此文件,而不是使用较小的正文副本。作者甚至对此发出警告:“你不敢让我们在段落文本上使用FitText来抓住你。这仅适用于巨大的显示文字!”

#2

You probably want to look into the position property

您可能想要查看position属性

#3

So I looked a bit over your code, and I don't get one thing. on tw-align you have max-width:50%. Any reason for that? If not, change it to max-width:100% on all of the tw-align.

所以我看了一下你的代码,我没有得到一件事。在tw-align上你有最大宽度:50%。有什么理由吗?如果没有,请在所有tw-align上将其更改为max-width:100%。

On 700px resolution, you should decrease the padding of tw-passage to 1em or something else, and your content should be responsive.

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

#1

@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. */