javascript 如何使放大/缩小网页不会扭曲我的网站布局？

我上周刚开始学习html和css，我在ym first网站工作。我一直在维护一个固定的显示器。每当我的网页缩放比例小于100%，我所有的元素都粘在屏幕的右边。当缩放比例大于100%，我所有的元素都聚集在一起。有什么方法可以防止这种情况吗？
When zoom is 100%When zoom is less than 100%
这是我的代码：

#TopBar {
  display: inline-block;
  width: 1365px;
  height: 80px;
  margin-left: -7px;
  margin-top: -9px;
  position: fixed;
  z-index: 1;
  background-color: white;
  box-shadow: 0px 5px 0px rgb(43, 123, 189);
}

#Logo {
  display: inline-block;
  font-size: 40px;
  margin-top: 20px;
  margin-left: 10px;
  font-weight: bolder;
  color: rgb(43, 123, 189);
}

#Links {
  display: inline-block;
}

liv {
  font-weight: bold;
  font-size: 15px;
  margin-right: 50px;
}

liv:hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  border: none;
  padding-top: 50px;
  padding-bottom: 17px;
  padding-left: 13px;
  padding-right: 13px;
}

liv:active {
  background-color: rgb(200, 200, 200);
}

#Log {
  border: none;
  color: white;
  font-weight: bold;
  font-size: 20px;
  width: 140px;
  height: 42px;
  border-radius: 20px;
  background-color: rgb(43, 123, 189);
  margin-right: 10px;
  margin-left: 265px;
  position: absolute;
  right: 180px;
  top: 27px;
}

#Log:hover {
  color: rgb(43, 123, 189);
  background-color: white;
  border-style: solid;
  border-color: rgb(43, 123, 189);
  transition: background-color, 0.1s;
}

#Log:active {
  opacity: 0.5;
}

#Sign {
  border: none;
  color: black;
  font-weight: bold;
  font-size: 20px;
  width: 140px;
  height: 42px;
  border-radius: 20px;
  position: absolute;
  top: 27px;
  right: 30px;
  background-color: rgb(230, 230, 230);
}

#Sign:hover {
  color: black;
  background-color: white;
  border-style: solid;
  border-color: black;
  transition: background-color, 0.1s;
}

#Sign:active {
  opacity: 0.5;
}

#View {
  display: block;
  width: 1386px;
  height: 550px;
  position: absolute;
  left: -20px;
  top: 80px;
  box-shadow: 0px 15px 20px rgb(200, 200, 200);
}

#Message {
  display: block;
  position: absolute;
  top: 150px;
}

#MessageTitle {
  color: white;
  font-weight: bolder;
  font-size: 40px;
  margin-bottom: -5px;
  margin-left: 40px;
}

#MessageParagraph {
  color: white;
  font-size: 20px;
  margin-left: 40px;
  width: 400px;
  margin-bottom: 30px;
}

#Join {
  color: white;
  font-weight: bold;
  border: none;
  width: 350px;
  height: 50px;
  border-radius: 25px;
  font-size: 20px;
  background-color: rgb(43, 123, 189);
  margin-left: 40px;
}

#Join:hover {
  color: rgb(43, 123, 189);
  background-color: white;
  border-style: solid;
  border-color: rgb(43, 123, 189);
  transition: background-color, 0.1s;
}

#Join:active {
  opacity: 0.5;
}

#code {
  top: 680px;
  display: block;
  position: absolute;
  width: 780px;
  height: 500px;
  object-fit: contain;
  margin-left: 30px;
}

#Selection {
  position: absolute;
  top: 700px;
  left: 850px;
}

#SelectionTitle {
  font-weight: bolder;
  font-size: 40px;
  margin-bottom: -5px;
  margin-left: 40px;
}

#SelectionParagraph {
  font-size: 20px;
  margin-left: 40px;
  width: 400px;
  margin-bottom: 30px;
}

#offers {
  margin-left: 30px;
  border: none;
  font-size: 20px;
  font-weight: bolder;
  background-color: rgb(230, 230, 230);
  width: 400px;
  height: 50px;
  border-radius: 25px;
}

#offers:hover {
  color: black;
  background-color: white;
  border-style: solid;
  border-color: black;
  transition: background-color, 0.1s;
}

#offset:active {
  opacity: 0.1;
}

<body>

  <div id="TopBar">
    <p id="Logo"> Osolu </p>
    <ul id="Links">
      <liv><a>Tutor</a></liv>
      <liv><a>Contact</a></liv>
      <liv><a>Courses</a></liv>
      <liv><a>Finance</a></liv>
      <liv><a>Testing</a></liv>
      <liv><a>More</a></liv>
    </ul>
    <button id="Log">Log In</button>
    <button id="Sign">Sign Up</button>
  </div>

  <img src="https://www.digitalgravity.ae/blog/wp-content/uploads/2022/03/Web-Development.jpg" id="View" />

  <div id="Message">
    <p id="MessageTitle"> Achieve Success</p>
    <p id="MessageParagraph">
      With everything you child needs in one place to achieve success in their pursuit of computer science and technology, Osolu is the perfect place to them to master a variety of languages, learn important coding concepts, and dive deep into the expansive
      world of website development
    </p>
    <button id="Join"> Start Your Journey </button>
  </div>

  <img src="https://gowithcode.com/wp-content/uploads/2021/04/top-programming-languages.jpg" id="code">

  <div id="Selection">
    <p id="SelectionTitle">Explore a Variety</p>
    <p id="SelectionParagraph">
      With everything you child needs in one place to achieve success in their pursuit of computer science and technology, Osolu is the perfect place to them to master a variety of languages, learn important coding concepts, and dive deep into the expansive
      world of website development
    </p>
    <button id="offers"> See What We Offer</button>
  </div>

</body>

你的网站在放大或缩小时失真的原因是因为屏幕大小的变化。你根据你的屏幕大小和设备开发你的网站，而没有使它在其他屏幕大小和设备上动态。要解决这个问题，你应该使用CSS媒体查询，使你的网站移动友好，并能够在不同的屏幕分辨率下适当地运行。看看这里：
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
下面是一些查询的简单模板，可能会派上用场：

/* Mobile Styles */
@media only screen and (max-width: 400px) {}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {}

/* Desktop Styles */
@media only screen and (min-width: 961px) {}

如果你想让你的网站完全响应，你必须使用更多的查询。一个建议是不要使用静态单位，如px作为填充和边距，因为其他单位，如%，em，或rem的行为取决于屏幕大小，而不是常数，如px。

javascript 如何使放大/缩小网页不会扭曲我的网站布局？

1条答案

相关问题

热门标签

最新问答