Saya juga menukar unit daripada rem更改为PX (disyorkan dalam soalan lain yang serupa dengan masalah saya), masih masalah yang sama, saya menyemaknya pada penyemak imbas yang berbeza, setiap pelayar mempunyai masalah ini tetapi Tingkah laku mereka dan jurang yang mereka cipta pada saiz skala berbeza adalah berbeza . Selain itu, saya tidak mempunyai sebarang masalah untuk bertindak balas terhadap titik putus atau saiz, semuanya berfungsi dengan baik.

Hubungan antara dan zum masuk atau keluar berdasarkan MDN视口:

Port pandangan anda ialah segala-galanya yang boleh dilihat pada masa ini, khususnya bahagian "Apakah itu port pandangan" dan mungkin beberapa menu navigasi. Saiz port pandangan bergantung pada saiz skrin, sama ada penyemak imbas berada dalam mod skrin penuh dan sama ada pengguna telah zum masuk.

https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

viewport 和 rem Hubungan antara:

Untuk halaman web responsif, saiz elemen halaman web berubah mengikut saiz port pandang. CSS membolehkan anda mengisytiharkan saiz fon menggunakan unit mutlak seperti piksel (px) atau unit relatif seperti peratusan, em atau unit rem.

https://blog.hubspot.com/website/css-rem#:~:text=Rem%20(short%20for%20%E2%80%9Croot%2D,1rem%20will%20also%20equal% 2016 pixels

Jadi persoalannya ialah: Oleh kerana berbilang penyemak imbas berkelakuan berbeza, adakah butang ini diubah kedudukan kerana zum masuk atau keluar, ada kaitan dengan struktur atau pengaturcaraan penyemak imbas, atau adakah ia hanya sesuatu yang lain, dan apakah logik di sebaliknya?

/*Default Adjustments*/

:root {
  --color-secondary: #00acc1;
  --color-accent: #F86F03;
  --color-body: #212121;
  --color-text: #FBFFDC;
  --colorButton: #847f7d;
  --colorBorder: #A8A196;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*,
 ::placeholder {
  color: var(--color-text);
}

html {
  font-size: 10px;
}

body {
  font-family: "Inter", arial, helvetica, sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  background: var(--color-body);
}

.btn {
  background: var(--colorButton);
  border: .1rem solid var(--colorBorder);
  border-radius: .3rem;
}


/*Basic divs*/

.adjust {
  display: flex;
  justify-content: center;
}

.whole {
  background: var(--color-secondary);
  padding: 1.5rem;
  border-radius: 0.6rem;
  margin-top: 2rem;
}

.add {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 1.3rem;
}

.addButton {
  position: absolute;
  cursor: pointer;
  top: 0.27rem;
  right: 8rem;
  font-size: 1.3rem;
  border: 0;
  border-radius: 0 .3rem .3rem 0;
  background: var(--colorButton);
}

.add input {
  outline: none;
  text-indent: 0.5rem;
  font-size: 1.3rem;
  background: var(--colorBorder);
  border: .3rem solid var(--colorButton);
  border-radius: .5rem;
}

.add input::placeholder {
  font-size: 1.25rem;
}

<div class="adjust">
  <div class="whole">
    <form class="add">
      <input class="addBook" type="text" required maxlength="50" pattern="\S(.*\S)?" title="Your book name can't start or end with white space and should include at least 
            1 non-white space character" placeholder="e.g Harry Potter" name="" id="" />
      <button class=" btn addButton">Add</button>
    </form>
  </div>
</div>

Imej:

Ini adalah 100% saiz berskala, semuanya baik-baik saja

Ini adalah 90% daripada saiz berskala dengan celah di bahagian atas

Ini adalah 80% daripada saiz yang dizum dan semuanya kembali normal semula!

Hasil yang sama berlaku dalam Zum masuk, jadi jika masalah ini berkaitan dengan kod saya, mengapa ia tidak tetap dalam setiap saiz zum, jika ia tidak berkaitan dengan kod saya, apakah yang berlaku di sebalik tabir? < /p>