レスポンシブ Web デザイン (RWD) は、レイアウトの柔軟性に基づき、ページのコンテンツを任意の幅に動的に設定できるようになっています。そのためには、相対長さ単位 (通常はパーセンテージ) を使用します。
抽象レイアウトでは、GeneXus ユーザーが、フォーム内のエレメントの幅をパーセンテージで設定できます。
ほかにも、CSS のビューポート単位という相対長さ単位を使用できます。GeneXus では、ビューポート単位に加えて、px と pt などの絶対単位もサポートされています。
ビューポートとは、ブラウザー内で実際のコンテンツが表示される領域、つまり Web ブラウザーのツールバーとボタンを除いた部分です。単位は次のとおりです:
- vw ビューポートの幅の 1% を表します。
- vh ビューポートの高さの 1% を表します。
- vmin ビューポートの小さいほうのサイズの 1%。
- vmax ビューポートの大きいほうのサイズの 1%。
これらはすべてブラウザー (ビューポート) のサイズのパーセンテージを示し、ウィンドウのサイズ変化に応じて変わります。
たとえば、フッターとヘッダーがそれぞれ画面の合計高さの 20% を占める Web ページを想定します。この場合、高さにパーセンテージを使用しても効果がありません。(*)
各セクションクラスの定義は次のとおりです:
.FooterSection {
height: 20vh;}
.HeaderSection{
height: 20vh;}
.ContainerForm{
height: 60vh;}
これらの単位は、幅、高さ、マージン、フォントサイズなど、ピクセル単位で値を指定できる任意の箇所で使用できます。ウィンドウサイズが変更されるか、デバイスが回転されると、ブラウザーによって再計算されます。
各ブラウザーのサポート状況については、こちらを参照してください。
ページの最大限の高さを取得する方法
レスポンシブ Web で上下の中央に配置する方法
ビューポートのサイズに応じてフォントサイズを変更する方法
(*) div のパーセンテージが有効となる条件
div のパーセンテージは、それが含まれる div の影響を受けます。
例:
<div id="wrapper">
<div class="container">
adsf
</div>
</div>
#wrapper {
height:100px;
}
.container
{
width:80%;
height:50%;
background-color:#eee;
}
ここで、.container の高さは 50 ピクセルになります。これは wrapper div の 100 ピクセルの 50% です。
|