Malgré l'utilisation de rem, pourquoi la taille de l'élément change-t-elle lorsque j'effectue un zoom avant ou arrière ?

Question

Je mets en œuvre un projet et j'utilise CSS position 属性在输入中放置一个按钮，一切正常，甚至我在响应模式下也没有问题，巧合的是我想缩放-检查某些内容，我意识到当我放大或缩小输入的顶部或底部之间会出现间隙，并且在某些尺寸下没有间隙，一切都很好，我使用 rem 对于我的所有 CSS 属性，因为据我所知 rem 可以通过 viewport 进行缩放，并且这种放大或缩小与 viewport 相关 大小，所以从逻辑上讲，如果我使用 rem et lorsque je fais un zoom arrière ou avant, il ne devrait pas y avoir d'espace, mais il y en a !

J'ai même changé l'unité de rem更改为PX (recommandé dans une autre question similaire à mon problème), toujours le même problème, je l'ai vérifié sur différents navigateurs, chaque navigateur a ce problème mais leur comportement et l'écart qu'ils créent à différentes tailles d'échelle sont différents . De plus, je n'ai aucun problème à répondre aux points d'arrêt ou aux tailles, tout fonctionne bien.

Relation entre et zoom avant ou arrière basé sur MDN视口 :

Votre fenêtre comprend tout ce qui est actuellement visible, en particulier la section "Qu'est-ce qu'une fenêtre" et peut-être certains menus de navigation. La taille de la fenêtre d'affichage dépend de la taille de l'écran, du fait que le navigateur soit en mode plein écran et du fait que l'utilisateur ait zoomé.

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

viewport 和 rem Relation entre :

Pour les pages Web réactives, la taille des éléments de la page Web change en fonction de la taille de la fenêtre d'affichage. CSS vous permet de déclarer la taille des polices en utilisant des unités absolues telles que les pixels (px) ou des unités relatives telles que les unités de pourcentage, em ou rem.

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

La question est donc la suivante : étant donné que plusieurs navigateurs se comportent différemment, ce bouton est-il repositionné en raison d'un zoom avant ou arrière, a-t-il quelque chose à voir avec la structure ou la programmation du navigateur, ou est-ce simplement autre chose, et quelle est la logique derrière cela ?

/*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>

Image :

C'est une taille à 100%, tout va bien

C'est 90 % de la taille à l'échelle avec un espace en haut

C'est 80% de la taille zoomée et tout est redevenu normal !

Le même résultat se produit lors du zoom avant, donc si ce problème est lié à mon code, pourquoi n'est-il pas constant dans chaque taille de zoom, s'il n'est pas lié à mon code, que se passe-t-il dans les coulisses ? < /p>

Answer 1

Je pense que cela a quelque chose à voir avec la position absolue, je l'ai déjà vécu. Cependant, pour résoudre ce problème, vous pouvez ajouter un wrapper autour du bouton, qui est une flexbox.

<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;
}