Remレイアウトを使用して適応性を実現する

以前、モバイル適応に関する記事を書きました。非常に長く、内容が多すぎて読みづらいものでした。そこで、よりわかりやすいバージョンに書き直しました。

なぜ適応するのか?

たとえば、モバイル ページの場合、デザイナーは幅 750 のビジュアル ドラフト キャンバスを提供し、ビジュアル ドラフト内の黄色のブロックのサイズは 702 x 300 で、アートボードの中央に配置されます。どのデバイスでも表示比率がビジュアル ドラフトと同じになり、レイアウト ビューポートの幅に応じて比例して拡大縮小されることが期待されます。

モバイル デバイスでは、通常、レイアウト ビューポートの幅 = デバイスの幅、つまりコンテンツが表示される領域がデバイス画面内になるように設定します。

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

しかし、デバイスによって幅が異なるため、レイアウト ビューポートの幅も異なります。例えば、iPhone 6のレイアウトビューポートの幅は375、iPhone6 Plusのレイアウトビューポートの幅は414です。

キャンバス幅が 750 のビジュアル ドラフトを、レイアウト ビューポート幅が 375 の iPhone 6 デバイスに表示する場合、次のようにビジュアル ドラフト内の要素のピクセル値を 2 で割ることができます。

。箱{
    幅: 351ピクセル;
    高さ: 150px;
    上マージン: 40px;
    背景: #F5A623;
}

iPhone 6 でのプレゼンテーションは右側に示すようになり、左側のビジュアル ドラフトのレイアウトと一致しています。

しかし、同じコードが iPhone 6 Plus では異なって表示され、両側の間隔が大きくなっています。 iPhone 6 Plus のレイアウト ビューポートは iPhone 6 よりも幅が広いため、長方形のボックスのサイズは変更されず、315 x 150 のままです。

キャンバス幅が 750 のビジュアルを、レイアウト ビューポート幅が 414 の iPhone 6 Plus デバイスでレンダリングする場合、ビジュアル内の要素のピクセル値を (750 / 414) で比例的に分割できます。つまり、次のようになります。

。箱{
    幅: 387.5px;
    高さ: 165.6px;
    上マージン: 44.2px;
    背景: #F5A623;
}

ページのプレゼンテーション効果もビジュアルドラフトと同じになります。

デバイス幅が異なる（ビューポート幅が異なる）ページでビジュアルドラフトと同じ効果を実現するには、異なる CSS ピクセル値を記述する必要があります。 私たちの目標は、同じ CSS コードを使用して、さまざまな幅のデバイスでビジュアル ドラフトと同じ効果を実現することです。簡単に言えば、さまざまなデバイスに適応した効果を実現するには、ビジュアル ドラフト内の要素とキャンバスのサイズ比をさまざまなデバイスで比例して拡大縮小する必要があります。

Remレイアウトを使用して適応問題を解決する

レイアウト ビューポートの幅が変わったときに、同じ CSS コードを使用して、要素のサイズをビジュアル ドラフトの比率に合わせて比例的に拡大縮小するにはどうすればよいですか? CSS の相対単位 rem の特性を組み合わせます。rem 単位のピクセル値は、ルート要素 (HTML 要素) のフォント サイズに相対的です。たとえば、HTML のフォント サイズが 100 ピクセルで、CSS スタイルで要素の幅が 2rem に設定されている場合、ページ上のこの要素の幅は 200 ピクセルになります。

ビジュアル ドラフト内の要素の比例スケーリングに従って、次のような関係を見つけることができます。

ビジュアル要素のサイズ / ビジュアルキャンバスの幅 = (rem 値 * HTML 要素のフォントサイズ) / レイアウトビューポートの幅 = rem 値 * (HTML 要素のフォントサイズ / レイアウトビューポートの幅)
= rem 値 / (レイアウト ビューポートの幅 / HTML 要素のフォント サイズ)

もし：

レイアウトビューポートの幅/HTML要素のフォントサイズ = 固定値 N

同じ CSS コードを使用して、あらゆるデバイスへの適応性を実現できます。

rem値 = N * (デザイン要素のサイズ / デザインキャンバスの幅)

したがって、自己適応を実現するには、N 値を決定し、次の 2 つの手順を完了するだけで済みます。

• ステップ1: HTML要素のフォントサイズを動的に設定する = レイアウトビューポートの幅 / N
• ステップ2：ビジュアルドラフトからエクスポートされた要素のCSSピクセル値をrem単位に変換します：rem値=N *（ビジュアルドラフト要素サイズ/ビジュアルドラフトキャンバス幅）

ドラフト キャンバスの幅が 750 の場合、rem 値の計算を容易にするために、N = 7.5 に設定することができます。この方法では、ドラフトのサイズ値を 100 で割るだけで、CSS ピクセル値が rem 単位で取得されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。