目次
1. 問題の説明:
最近、プログラミング中にエディターで問題が発生し、ノートブック (15.6 インチ) に背景画像を配置したところ、画面がいっぱいになっていたのですが、24 インチまたは 27 インチの画面に変更して効果を見てみると、 2 つの画像で次の問題を見つけました。
1. 余分なスクロール距離があります
2. 大きな画面に変更すると、背景が小さくなります。
2. 知識を理解する必要がある
それは「vh」と「vw」です。
-
vw ユニットはウィンドウの幅に応じてサイズを自動的に変更できます。1vw はウィンドウ幅の 1% です。
-
vh ユニットはウィンドウの高さに応じてサイズを自動的に変更できます。1vh はウィンドウの高さの 1% です。
CSS と HMTL を学習したばかりの上級者が知っている単位は「%」と「px」だけです。
しかし、実際の開発では、この 2 つを知っているだけでは不十分です。たとえば、今日の問題を解決するには、「vh」と「vw」が必要です。
3 つ目は、次のことを解決することです。
1. HTML:
src はそれ自体のピクチャを参照できます
<div id="Max_box">
<img src="The Game Map.jpg" alt="" width="100%" height="100%">
</div>2. CSS 上:
#Max_box {
width: 100%;
height: 100vh;
}このようにして、異なる画面サイズの場合でも、スクロール バーや縮小は発生しません。
今回エディタでは現状の問題を解決するにはvhのみを使用しましたが、
もちろん、将来的にはvhとvwを同時に使うか個別に使うかなど、柔軟に切り替える必要があります。
4.効果：
問題は解決されました。画面が何インチであっても、背景画像がウィンドウ全体を覆います。
記事に不備がある場合は、批判していただいても構いませんし、指導していただいても構いません。