统一调整

Question

因此，当我以相同的比例放大或缩小时，我试图弄清楚如何使我的所有网页更改大小。我无法弄清楚如何做到这一点，但这是我在几分钟内创建的一个小小的测试。

https://jsfiddle.net/cejnkx4h/1/

正如您在此看到的那样，每当浏览器/画布改变大小时，所有文本和内容都会发生变化。我希望用户能够放大以适应损伤但是我希望整个网页以相同的比例放大，而不仅仅是文本等特定元素。 如果你们中的任何人都可以帮助我，我会非常感激。

body,
html {
  margin: 0;
  background-image: url("https://www.hdwallpapers.in/walls/blur_colors-wide.jpg");
  background-position: cover;
  background-size: 100%;
  background-attachment: fixed;
  min-width: 1000px;
  background-repeat: no-repeat;
}

.bg {
  width: 60%;
  margin-left: 20%;
  background-color: grey;
  border: thick solid black;
  height: 100%;
}

#right {
  width: 45%;
  vertical-align: baseline;
  border: thick solid black;
}

#left {
  width: 45%;
  float: left;
  font-size: 16pt;
  color: black;
  padding-top: 20px;
}

.format {
  width: 85%;
  margin-left: 10%;
  overflow: hidden;
  padding-top: 5%;
  padding-bottom: 10%;
  display: flex;
  align-items: center;
}

<div class="bg">
  <div class="format">
    <div id="left">
      <p>
        Gaming Pc
        <br/>$1500
      </p>
    </div>
    <div id="right">
      <img src="https://www.cyberpowerpc.com/images/cs/smraidmax/blk_400.png" width="100%" </div>
    </div>
  </div>

Answer 1

您可以使用css transform按比例缩放页面。

transform: scale(1);

像这样的东西。等级1表示100％。您可以将其设置为0.5表示50％或1.1表示110％。

希望这有帮助。