Warum ändert sich trotz der Verwendung von rem die Elementgröße, wenn ich hinein- oder herauszoome?-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich setze ein Projekt um und verwende CSSposition属性在输入中放置一个按钮，一切正常，甚至我在响应模式下也没有问题，巧合的是我想缩放-检查某些内容，我意识到当我放大或缩小输入的顶部或底部之间会出现间隙，并且在某些尺寸下没有间隙，一切都很好，我使用rem 对于我的所有 CSS 属性，因为据我所知rem可以通过viewport进行缩放，并且这种放大或缩小与viewport 相关大小，所以从逻辑上讲，如果我使用remund beim Verkleinern oder Vergrößern sollte es keine Lücken geben, aber es gibt sie!

Ich habe sogar die Einheit vonrem更改为PXgeändert (empfohlen in einer anderen Frage, die meinem Problem ähnelt), immer noch das gleiche Problem, ich habe es in verschiedenen Browsern überprüft, jeder Browser hat dieses Problem, aber ihr Verhalten und die Lücke, die sie bei verschiedenen Maßstabsgrößen erzeugen, sind unterschiedlich . Außerdem habe ich keine Probleme damit, auf Haltepunkte oder Größen zu reagieren, alles funktioniert einwandfrei.
Beziehung zwischenund Vergrößern oder Verkleinern basierend aufMDN视口:
Ihr Ansichtsfenster enthält alles, was derzeit sichtbar ist, insbesondere den Abschnitt „Was ist ein Ansichtsfenster“ und möglicherweise einige Navigationsmenüs. Die Größe des Ansichtsfensters hängt von der Größe des Bildschirms ab, davon, ob sich der Browser im Vollbildmodus befindet und ob der Benutzer „vergrößert“ hat.https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts
Beziehung zwischen:viewport和remBei responsiven Webseiten ändert sich die Größe der Webseitenelemente mit der Größe des Ansichtsfensters. Mit CSS können Sie Schriftgrößen mit absoluten Einheiten wie Pixeln (px) oder relativen Einheiten wie Prozent-, em- oder rem-Einheiten deklarieren.
https://blog.hubspot.com/website/css-rem#:~:text=Rem%20(short%20for%20%E2%80%9Croot%2D,1rem%20will%20also%20equal% 2016 Pixel .
Die Frage ist also: Da sich mehrere Browser unterschiedlich verhalten, wird diese Schaltfläche beim Vergrößern oder Verkleinern neu positioniert, hat das etwas mit der Struktur oder Programmierung des Browsers zu tun oder ist es einfach etwas anderes, und was ist die Logik dahinter?
/*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; }
     
 
 
       
Bild:Dies ist eine 100 % skalierte Größe, alles ist in Ordnung
Das sind 90 % der skalierten Größe mit einer Lücke oben
Das sind 80 % der gezoomten Größe und alles ist wieder normal!
Das gleiche Ergebnis tritt beim Vergrößern auf. Wenn dieses Problem also mit meinem Code zusammenhängt, warum ist es dann nicht in jeder Zoomgröße konstant? Wenn es nicht mit meinem Code zusammenhängt, was passiert dann hinter den Kulissen?

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