如何阻止元素調整大小>

Question

當我調整我的網頁大小時，一切都錯位了。 文本位於容器下方，圖像變得太寬。 我怎樣才能使它在調整圖像大小時一切都保持原位？ 我查看了一些解決方案，但似乎沒有一個對我有用。 任何幫助，將不勝感激！

body {
  background-color: #ADD8E6;
  padding: 10px;
  margin: 0;
}
.hcontainer {
  background-color: #FFFFE0;
  height: 600px;
  text-align: center
}
div h1, p {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 5px;
  margin: 0;
}
img {
  margin: 0;
  padding-top: 20px;
}
#mini {
  font-size: 13px;
  margin-top: 5px;
}
.imgcontainer {
  background-color: pink;
}
.mcontainer {
  background-color: #FFFFE0;
  height: 600px;
  margin-top: 20px;
  padding-top: 30px;
}
li {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}
h3 {
  text-align: center;
}
.list {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
h4 {
  text-align: center;
  padding-top: 20px;

Answer 1

使用百分比而不是 px，這將使任何元素在調整窗口大小時都具有相對大小。

Answer 2

使用百分比而不是像素，並注意所有組件的寬度應為 100%。 所以所有組件的寬度、填充、邊距甚至邊框都很重要！ 所有公司的寬度都應為 100%。

注意：如果您想使用邊框，則使用像素更有意義，因此如果您將邊框設置為 1px，例如，您將其他組件的寬度設為 99%。

我向您推薦的另一件事是學習和使用 Bootstrap 來制作適用於所有平台的響應式網站。