モバイルレイアウトにvw+remを使用する方法

まだ rem フレキシブルレイアウトを使用していますか?圧縮された js コードの大きなセクションを HTML ファイルのヘッダーに配置することに不安を感じますか?コードをより純粋にできるvwについて学びましょう

REMレイアウトスキームを簡単に紹介する

rem は CSS の長さの単位で、1rem はルート要素 html の font-size 値です。ページ上のすべての要素が rem 単位を使用している場合、ルート要素の font-size 値を変更するだけで、すべての要素が比例して拡大または縮小されます。したがって、柔軟なレイアウトを実現するには、画面の幅に応じて HTML のフォント サイズ値を変更する小さな js コードを記述するだけで済みます。この方法は確かに便利で互換性も良好であり、現在非常に主流の弾性レイアウト ソリューションとなっています。ただし、このソリューションには欠点があります (欠点 1: ルート要素の font-size 値と強く結びついているため、システム フォントを拡大または縮小するとレイアウトが乱れる、欠点 2: html ファイルのヘッダーに js コードを挿入する必要がある)。この記事では、より優れた純粋なソリューションを紹介します。

VWユニットは柔軟なレイアウトを実現

まず、vw vh単位の公式説明を見てみましょう。w3c vw: ビューポートの幅の1% vh: ビューポートの高さの1%

ビューポートは、ブラウザの表示領域のサイズです。次のように理解できます: 100vw = window.innerwidth、100vh = window.innerheight。モバイル デバイスでは、通常、100vw が画面の幅であると想定できます。 vw レイアウトを使用する場合、rem のように js でルート要素のフォント サイズを動的に設定する必要はありません。この関数を使用して sass で変換するだけで済みます。

// iPhone 7 サイズ @2x 750 ピクセル幅のビジュアル ドラフトを例にします @function vw($px) {
    @return ($px / 750) * 100vw;
}

//div 要素がビジュアル ドラフトにあり、幅が 120 ピクセル、フォント サイズが 12 ピクセルであると仮定します。
div {
    幅: vw(120);
    フォントサイズ: vw(12);
}

vw単位とパーセンテージ%単位の比較

では、100vw と通常使用する width:100% の違いは何でしょうか?

1. パーセンテージ % は親要素の幅または高さに基づいて計算されますが、vw vh はビューポートに応じて固定的に計算され、親要素の幅と高さの影響を受けません。

2.100vw にはページ スクロール バーの幅が含まれます (ページ スクロール バーはビューポート範囲に属し、100vw には当然ページ スクロール バーの幅が含まれます)。ただし、body または html が wi​​dth:100% に設定されている場合、ページ スクロール バーの幅は含まれません。つまり、垂直スクロール バーがある場合、100vw は 100% よりも広くなります。 これにより、PC 側で vw 単位を使用する場合、ページ コンテンツが 1 画面の長さを超えて垂直スクロール バーが表示され、要素 width:100vw があると、要素 (100vw + スクロール バーの幅) がビューポートの幅を超えるため、水平スクロール バーが表示されるという問題が発生します。 （モバイル端末ではスクロールバーがスペースを取らないので、この問題は発生しません。）ただし、PC端末では一般的に伸縮性のあるレイアウトは求められないので、可能な限りwidth:100%を使用する方が無難です。

• CSS3 仕様によると、ビューポート単位には主に次の 4 つが含まれます。
  
• vw : 1vwはビューポート幅の1%に等しい
• vh : 1vhはビューポートの高さの1%に等しい
• vmin: vwとvhの最小値を選択
• vmax: vwとvhの間で最大のものを選択

ビューポート単位で測定すると、ビューポートの幅は 100vw、高さは 100vh です (左側は垂直画面、右側は水平画面)

たとえば、デスクトップのブラウザ ビューポート サイズが 650px の場合、1vw = 650 * 1% = 6.5px となります (これは理論上の計算です。ブラウザが 0.5px をサポートしていない場合、実際のレンダリング結果は 7px になる可能性があります)。

互換性

適切な単位を使用してページを調整します

モバイル端末開発では、複数の端末との互換性を実現するためにページをどのように適応させるかが最も重要なポイントです。適応方法によって、それぞれ長所と短所があります。

主流のレスポンシブ レイアウトとエラスティック レイアウトについては、メディア クエリを通じて実装されたレイアウトでは、複数のレスポンシブ ブレークポイントの設定が必要であり、もたらされるエクスペリエンスも非常にユーザーフレンドリーではありません。レスポンシブ ブレークポイントの範囲内のレイアウトの解像度は維持され、レスポンシブ ブレークポイントを切り替える瞬間に、レイアウトはカセット プレーヤーが何度も「クリック」するのと同じように、不連続な切り替え変化をもたらします。

rem 単位の動的な計算を使用する柔軟なレイアウトの場合、解像度の変化を監視し、ルート要素のフォント サイズを動的に変更するスクリプトをヘッダーに埋め込み、CSS と JS を結合する必要があります。

この問題を解決する方法はありますか?

答えは「はい」です。適切なユニットを使用してアダプティブ ページを実装することで、応答性障害の問題とスクリプト依存性の問題の両方を解決できます。

使用状況はiPhone 6（750）に基づいています

通常、最初のステップは、モバイル端末のメタタグを設定することです。

<meta name="viewport" content="width=デバイス幅、初期スケール=2.0、最大スケール=2.0、最小スケール=2.0、ユーザースケーラブル=いいえ">

iPhone 6 および他のほとんどのデバイスの DPR は 2 であるため、2 番目の手順の便宜上、これを変換する必要があります。

2番目のステップは、本文とHTMLのフォントサイズを設定することです。

html{
    フォントサイズ: 13.3333333333333vw // 100px
}

13.3333333333333vw はどこから来たのですか?

• 最適な解像度はiPhone 6 750pxを基準に100vwです
• IKEA/iPhone6
  • 100vw / 750 = 0.133333333333333vw
• 100ピクセルを許容サイズとすると、
• 100ピクセル / 750 = 0.133333333333333ピクセル
• つまり、1px = 0.13333333333333333vw
• すると画像全体は0.1333333333333333 * 10013.33333333333333vw = 100pxに等しくなります。
• 最終的に100px = 1remになります

このように変換することで、vwを使用してremを100pxのベースに変換します。

そうすればプロジェクトでうまく活用できる

div {
 
     // 幅: 100px;
     幅: 1rem; 
}
 
スパン {
   // 高さ: 12px
    高さ: .12rem
}

モバイルレイアウトにvw+remを使用する方法については、これで終わりです。vw+remモバイルレイアウトに関する関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。