Units)」について触れました。vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。Units下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。Units)とはビューポートの単位は相対的な単位で、それ自身が客観的な大きさを持っていないことを意味し、ビューポートのサイズによって決定されます。ビューポートと関係がある単位は、4種類です。vh)にフォーカスします。多くのケースでこのビューポートを使った単位とパーセントを使った単位は似ていますが、それぞれ明確な長所と短所を持っています。簡単に言うと、幅を扱う時は「%」、高さを扱う時は「vh」の方が適切です。vw)「vw」はビューポートの幅に基づいてそのサイズを決定します。このビューポートの幅というのは、ブラウザのスクロールバーを含んだサイズで計算されます。ビューポートの幅とコンテンツの幅もしページが長く、スクロールバーが表示されているのであれば、ビューポートの幅はhtml要素の幅より大きくなります。bodyそのため、もし要素に「100vw」を設定すると、その要素はhtmlとbodyより大きいサイズになってしまいます。下記の例では、html要素の周りにレッドのボーダー、セクションには背景を設定しました。要素をページの幅いっぱいにする時は、ビューポートで幅を指定するより、パーセントを使用する方が良いでしょう。%)要素をページの高さいっぱいにする時は、パーセントよりビューポートの単位「vh」が適しています。パーセントで定義された要素のサイズは親要素に基づくため、親要素が高さに何らかの影響を受けている必要があります。これを実現するには、html要素を親要素として要素を配置するか、なんらかのハックをしなければできないでしょうしかし、「vh」を使用すると簡単にできます。100vh;}「.example」要素はどこに配置しても(親要素が何であっても)、ビューポートに比較してサイズが決定されます。スクロールバーの問題はたいていのページは横スクロールがないので問題ないでしょう。「vh」を使ってどのようにデザインに適用するか例を見てみましょう。フルスクリーンの背景イメージ「vh」を使った代表的な用途が、デバイスのサイズにかかわらずスクリーンの高さと幅いっぱいに背景イメージを表示する方法です。これは「vh」を使うと簡単に実装できます。100vh;}フルスクリーンのセクション同様にページのそれぞれのセクションをビューポートの高さと幅いっぱいに表示させることも簡単です。100vh;}JavaScriptを使用すると、ページをぱらぱらめくるようなエフェクトを与えることもできます。「vh」は画像サイズをコントロールするために使用することもできます。画像をスクリーンのサイズにかかわらず常に全部が見えるように設定することもできます。ユニットは比較的新しい単位のため、いくつかのブラウザに若干の問題がありますが、それらを解決するソリューションもあります。Queriesを使用して特定のデバイスをターゲットにする。pburtchaellの解決方法を使用してください。指定する時に「vmin」「vm」両方の単位を使用する。pburtchaellの解決方法を使用してください。Posts関連記事が見つかりませんでした。