Walaupun menggunakan rem, mengapa saiz elemen berubah apabila saya mengezum masuk atau keluar?

Question

Saya sedang melaksanakan projek dan saya menggunakan CSS position 属性在输入中放置一个按钮，一切正常，甚至我在响应模式下也没有问题，巧合的是我想缩放-检查某些内容，我意识到当我放大或缩小输入的顶部或底部之间会出现间隙，并且在某些尺寸下没有间隙，一切都很好，我使用 rem 对于我的所有 CSS 属性，因为据我所知 rem 可以通过 viewport 进行缩放，并且这种放大或缩小与 viewport 相关 大小，所以从逻辑上讲，如果我使用 rem dan apabila saya zum keluar atau zum masuk seharusnya tidak ada sebarang jurang, tetapi ada!

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>

Answer 1

Saya rasa ia ada kaitan dengan kedudukan mutlak, saya pernah mengalaminya sebelum ini. Walau bagaimanapun, untuk menyelesaikan masalah ini, anda boleh menambah pembalut di sekeliling butang, iaitu kotak fleksibel.

<div class="wrapper">
  <button class="btn addButton">Add</button>
</div>

.wrapper {
    height: 100%;
    width: fit-content;
    padding: .3rem 0;
    position: absolute;
    top: 0;
    right: 0;
    float: left;
    border-radius: 0 .3rem .3rem 0;
    display: flex;
    /*To keep item centered so gap will not appear*/
    align-items: center;
}
.addButton {
    font-size: 1.3rem;
    border: 0;
    background: var(--colorButton);
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    cursor: pointer;
}