まだ 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 が width:100% に設定されている場合、ページ スクロール バーの幅は含まれません。つまり、垂直スクロール バーがある場合、100vw は 100% よりも広くなります。 これにより、PC 側で vw 単位を使用する場合、ページ コンテンツが 1 画面の長さを超えて垂直スクロール バーが表示され、要素 width:100vw があると、要素 (100vw + スクロール バーの幅) がビューポートの幅を超えるため、水平スクロール バーが表示されるという問題が発生します。 (モバイル端末ではスクロールバーがスペースを取らないので、この問題は発生しません。)ただし、PC端末では一般的に伸縮性のあるレイアウトは求められないので、可能な限りwidth:100%を使用する方が無難です。
ビューポート単位で測定すると、ビューポートの幅は 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 はどこから来たのですか?
このように変換することで、vwを使用してremを100pxのベースに変換します。 そうすればプロジェクトでうまく活用できる div { // 幅: 100px; 幅: 1rem; } スパン { // 高さ: 12px 高さ: .12rem } モバイルレイアウトにvw+remを使用する方法については、これで終わりです。vw+remモバイルレイアウトに関する関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...
目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...
1. golang:最新のベースイメージ mkdir gotest タッチメイン.go Docker...
1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...
MySQL でカーソルを宣言する方法: 1. 変数とカーソルを宣言する 結果をvarchar(300...
背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...
ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズ...
この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...
目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....
目次機能紹介レンダリング1. ホームページレンダリング用のコード(index03) 2. ゲーム開始...
HTML でよく使用されるエスケープ文字をまとめると次のようになります。 改行...
1. JDKをインストールする1. 古いバージョンまたはシステム独自のJDKをアンインストールする...
Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...
作業開発プロセス中に、顧客の名前、携帯電話番号、ID カード、およびドキュメントの種類を動的に保存す...
要点CSS resize プロパティを使用すると、要素のサイズ変更可能性を制御できます。サイズ変更を...