問題の説明:
vue プロジェクトを一人で書きました。業界に入ったばかりなので、問題を見つけるのに時間がかかりました。これは、業界に入ったばかりの私が踏まなければならない落とし穴かもしれません。とにかく、私が遭遇した間違いは間違いありませんはい、将来同様の問題に対処する方法を覚えておく必要があります。
話を戻しますが、私が遭遇した問題はタイトルです。ページを縮小すると、要素が左上隅まで縮小され、スタイルの崩壊に直結します。元の 1 つは左、もう 1 つは右です。要素間の距離は、2 つの要素間の相対的な距離を維持するのではなく、縮小後に変化します。ただし、ほとんどの Web サイトでは、ズームするとページ全体が中央に縮小されます (csdn を試すこともできます)。ページの拡大を除けば、この問題は通常は発生しません。拡大した場合、一般的な効果は元のページは変更されないままですが、余分な進行状況バーが表示されます。当時、私も多くの情報を参考にし、Baidu、Google、長い間検索しましたが、満足のいく解決策が見つかりませんでしたが、インターネット上の問題の解決策は 1 つだけでした。
クラッシュした要素の最も外側のレイヤーに div のレイヤーを配置し、この親 div のスタイルを margin: 0 auto に設定します。つまり、コンテンツをこの div の中央に配置します。ページが縮小すると、コンテンツは中央に配置されます。次の効果と同様にズームアウトします。
解決：
解決策については、このコードは企業秘密とみなされる可能性があるため、詳細は掲載しませんが、一般的なアイデアは次のとおりです。
1. まず、位置決めだけだと、ページを縮小したときに両者の相対的な距離が保てなくなり、拡大したときに確実にスタイルが崩れてしまいます。
2. これら 2 つの要素 (独自のインターフェイスに応じて複数の要素) の親要素にフレックス レイアウトを設定してから、フレックス コードの共通行を設定してみることができます。
3. 表示する必要があるコンテンツと親要素の関係はおおよそ次のとおりです。
<div class="这里是父div">
<div class="这里是你需要中部居左的内容">
<!--左半边div的内容-->
</div>
<div class="这里是你需要中部居右的内容">
<!--右半边div的内容-->
</div>
</div>4. 最後に、要素が中央に押し込まれている可能性がありますが、このとき、相対配置の空間自体はまだ存在しており、分離されないため、相対配置を使用して div を左右に配置するのが最善です。ドキュメント フローは、他の要素のレイアウトには影響しません。
5. 調整した後、ブラウザをズームすると、スタイルが崩れず、ズームアウトしてもズームインしても、2 つの間の距離は同じままであることに驚くでしょう。
このブログが見ている方のお役に立てれば幸いです！！！