当我最大化窗口时，Php回声改变位置

Question

所以我尝试制作一个可点击的地球仪。单击它后，我希望它从我的本地主机将我重定向到相应的文件。 这是我用来呼应地球的 PHP 部分。

<?php
    echo '<a href="13.3.html"><div class="ornament or1"> <div class="shine"><font size="5" color="#f70505"><b> 13.3</b></font></div></div></a><br/>';
    echo '<a href="13.4.html"><div class="ornament or2"><div class="shine"><font size="5" color="#dbb700"><b> 13.4</b></font></div></div></a><br/>';
    echo '<a href="13.5.html"><div class="ornament or3"><div class="shine"><font size="5" color="#6d36c5"><b> 13.5</b></font></div></div></a><br/>';
    echo '<a href="13.6.html"><div class="ornament or4"><div class="shine"><font size="5" color="#f70505"><b> 13.6</b></font></div></div></a><br/>';
  ?>

css文件就是这个。

.container {
    position: relative;
    width: 800px;
    height: 800px;
    margin: auto;
    margin-top: 3vh;
    background: #0b1a5e;
    border-radius: 120px;
    z-index: -2;
    margin: 0 auto;
}


.tree {
  position: relative;
  width: 100%;
  height: 100%;
  left: 13%;
  top: 5%;
  margin: 0 auto;
}

.tree-triangle3 {
  position: absolute;
  width: 66%;
  height: 36%;
  bottom: 20%;
  left: 3.5%;
  background: #034f33;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree-triangle2 {
  position: absolute;
  width: 53%;   
  height: 33%;
  bottom: 35%;
  left: 10%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #046944;
  z-index: 2;
}

.tree-triangle1 {
  position: absolute;
  width: 42%;
  height: 25%;
  bottom: 50%;
  left: 15.5%;
  background: #038052;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 3;
}

.trunk {
  position: absolute;
  width: 10%;
  height: 16%;
  background: #66503e;
  z-index: -1;
  bottom: 5%;
  left: 32%;
}


.ornament {
    position: absolute;
    width: 8%;
    height: 8%;
    border-radius: 50%;
    box-shadow: 0 0 3px #033b26;
    /*   background: #eb5252; */
    z-index: 2;
    text-align: center;
}


.shine {
  position: absolute;
  width: 55%;
  height: 55%;
  top: 10%;
  right: 11%;
  border-radius: 50%;
  background: white;
  filter: opacity(60%);
}

.or1 {
  left: 50%;
  top: 34%;
  background: #0742d9;
}

.or2 {
  left: 45%;
  top: 45%;
  background: #c91212;
}

.or3 {
  left: 28%;
  top: 60%;
  background: #dbb700;
}

.or4 {
  left: 60%;
  top: 68%;
  background: #6d36c5;
}

.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffe380;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #5df505;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    50% 70%,
    50% 60%,
    50% 46%,
    50% 36%
  );
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

我的问题是，当 T 最大化 chrome 窗口时，装饰品会改变它们的宽度和位置。有人知道如何解决它吗？

Answer 1

这不是 PHP 回显的问题。事实上，当您调整视口大小时，HTML（和 CSS）保持不变 - PHP 不会再次调用。

我假设所有东西都包含在设置为方形的容器中。您不需要使用媒体查询来重置其尺寸，但您可能确实需要确保它对于视口永远不会太宽或太高（这是您需要做出的决定，对用户来说是否可以必须滚动）。这个 sn-p 只是将最大宽度限制为视口的宽度。它还通过使用 CSS 纵横比属性来设置高度，以确保它始终是方形的。

.container {
  position: relative;
  width: 800px;
  max-width: 100vmin;
  aspect-ratio: 1;
  margin: auto;
  margin-top: 3vh;
  background: #0b1a5e;
  border-radius: 120px;
  z-index: -2;
  margin: 0 auto;
}

.tree {
  position: relative;
  width: 100%;
  height: 100%;
  left: 13%;
  top: 5%;
  margin: 0 auto;
}

.tree-triangle3 {
  position: absolute;
  width: 66%;
  height: 36%;
  bottom: 20%;
  left: 3.5%;
  background: #034f33;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree-triangle2 {
  position: absolute;
  width: 53%;
  height: 33%;
  bottom: 35%;
  left: 10%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #046944;
  z-index: 2;
}

.tree-triangle1 {
  position: absolute;
  width: 42%;
  height: 25%;
  bottom: 50%;
  left: 15.5%;
  background: #038052;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 3;
}

.trunk {
  position: absolute;
  width: 10%;
  height: 16%;
  background: #66503e;
  z-index: -1;
  bottom: 5%;
  left: 32%;
}

.ornament {
  position: absolute;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  box-shadow: 0 0 3px #033b26;
  /*   background: #eb5252; */
  z-index: 2;
  text-align: center;
}

.shine {
  position: absolute;
  width: 55%;
  height: 55%;
  top: 10%;
  right: 11%;
  border-radius: 50%;
  background: white;
  filter: opacity(60%);
}

.or1 {
  left: 50%;
  top: 34%;
  background: #0742d9;
}

.or2 {
  left: 45%;
  top: 45%;
  background: #c91212;
}

.or3 {
  left: 28%;
  top: 60%;
  background: #dbb700;
}

.or4 {
  left: 60%;
  top: 68%;
  background: #6d36c5;
}

.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffe380;
  clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #5df505;
  clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%);
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

<div class="container">
  <a href="13.3.html">
    <div class="ornament or1">
      <div class="shine">
        <font size="5" color="#f70505"><b> 13.3</b></font>
      </div>
    </div>
  </a><br/>;
  <a href="13.4.html">
    <div class="ornament or2">
      <div class="shine">
        <font size="5" color="#dbb700"><b> 13.4</b></font>
      </div>
    </div>
  </a><br/>;
  <a href="13.5.html">
    <div class="ornament or3">
      <div class="shine">
        <font size="5" color="#6d36c5"><b> 13.5</b></font>
      </div>
    </div>
  </a><br/>;
  <a href="13.6.html">
    <div class="ornament or4">
      <div class="shine">
        <font size="5" color="#f70505"><b> 13.6</b></font>
      </div>
    </div>
  </a><br/>;
</div>