rem を使用しているにもかかわらず、拡大または縮小すると要素のサイズが変化するのはなぜですか?

Question

CSS position プロパティを使用して入力にボタンを配置するプロジェクトを実装しています。すべてが正常に動作します。レスポンシブ モードでも問題ありません。偶然にもズームしたいので、いくつか確認してください。コンテンツを拡大または縮小すると、入力の上部または下部の間に隙間があることに気付きました。特定のサイズでは隙間がなく、すべて問題ありません。すべての CSS に rem を使用しています。プロパティ 、私の知る限り、 rem は viewport を通じてズームでき、このズームインまたはズームアウトは viewport サイズに関連しているため、論理的にはrem を使用すると、ズームアウトまたはズームインしたときに隙間がないはずですが、隙間があります。

単位を rem から PX (私と同様の別の質問で推奨されています) に変更しましたが、依然として同じ問題が発生しています。別のブラウザーで確認しました。どのブラウザにもこの問題はありますが、ブラウザの動作や、ズーム サイズが異なると生じるギャップは異なります。さらに、ブレークポイントやサイズへの応答に問題はなく、すべてが正常に動作します。

ビューポート と MDN に基づくズームインまたはズームアウトの関係:

ビューポートには、現在表示されているすべてのもの、特に「ビューポートとは」セクションと、場合によってはいくつかのナビゲーション メニューが含まれます。ビューポートのサイズは、画面のサイズ、ブラウザが全画面モードであるかどうか、およびユーザーが

ズームインするかどうかによって異なります。 https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

viewport

と rem の関係: レスポンシブ Web ページの場合、Web ページ要素のサイズはビューポートのサイズに応じて変化します。 CSS を使用すると、ピクセル (px) などの絶対単位、またはパーセンテージ、em、rem 単位などの相対単位を使用してフォント サイズを宣言できます。

https://blog.hubspot.com/website/css-rem#:~:text=Rem (「root-,1rem」の略称は、% 2016 ピクセルにも相当します。

そこで質問は次のとおりです。複数のブラウザの動作が異なるため、このボタンはズームインまたはズームアウトによって位置が変更されるのでしょうか、ブラウザの構造またはプログラミングと何か関係があるのでしょうか、それとも単に別の理由があるのでしょうか。また、その背後にあるロジックは何ですか?

リーリー リーリー ＃＃＃＃＃＃画像＃＃＃：＃＃＃

これは 100% スケールされたサイズです。すべて問題ありません。

これは拡大縮小されたサイズの 90% であり、上部にギャップがあります これはズーム サイズの 80% であり、すべてが再び通常に戻ります。

ズームインでも同じ結果が発生します。この問題がコードに関連している場合、なぜ各ズーム サイズで一定ではないのか、コードに関係がない場合、舞台裏で何が起こっているのでしょうか。

Answer 1

これは絶対位置決めに関係があると思います。私は以前に経験しました。 ただし、この問題を解決するには、ボタンの周囲にラッパー (フレックスボックス) を追加します。

リーリー リーリー