Warum ändert sich trotz der Verwendung von rem die Elementgröße, wenn ich hinein- oder herauszoome?
Ich setze ein Projekt um und verwende CSS position 属性在输入中放置一个按钮，一切正常，甚至我在响应模式下也没有问题，巧合的是我想缩放-检查某些内容，我意识到当我放大或缩小输入的顶部或底部之间会出现间隙，并且在某些尺寸下没有间隙，一切都很好，我使用 rem 对于我的所有 CSS 属性，因为据我所知 rem 可以通过 viewport 进行缩放，并且这种放大或缩小与 viewport 相关 大小，所以从逻辑上讲，如果我使用 rem und beim Verkleinern oder Vergrößern sollte es keine Lücken geben, aber es gibt sie!
Ich habe sogar die Einheit von rem更改为PX geä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 zwischen und Vergrößern oder Verkleinern basierend auf MDN视口:
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;
}
<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>
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?
