レスポンシブ スペーサー ブロックは Web サイトに空のスペースを追加し、さまざまな単位で定義できます。これにより、大きなデスクトップや小さなモバイル画面でバーの高さが同じ固定ピクセル数にならない小さな画面でもスペーサーを表示できます。
次の単位から選択できます。
- px – ピクセル単位の固定高さ
- vh – ビューポートの高さの 1% に対する相対値 (2vh は画面の高さの 2% を意味します)
- vw – ビューポートの幅の 1% に対する相対値 (2vw は画面幅の 2% を意味します)
- rem – ルート要素の font-size に対する相対値 (2rem はルート フォント サイズの 2 倍のサイズを意味します)
- em – 要素のフォント サイズに対する相対値 (2em は現在のフォント サイズの 2 倍のサイズを意味します)
- % – 親要素に対する相対値 (2% は親要素の高さの 2% を意味します)
負の値も可能です。そうすることで、スペーサーより下のコンテンツがスペーサーより上のコンテンツにオーバーフローする可能性があります。
レスポンシブデザインでは、トグルでスペーサーを完全にオフにすることができます レスポンシブで非表示にする。スペーサーは 600 ピクセル未満の画面では無効になります。
