序文 フロントエンド コードの記述では、「互換性」という言葉から逃れることはできません。過去の PC 時代、プログラマーは IE の傲慢さのために IE 互換性の道で苦労してきました。現在、モバイル デバイスの普及により、IE がなくなるかのような希望が生まれているようですが、しかし!一つの波の攻撃が収まる前に、また別の波が侵略してきます~モバイル端末はIEを考慮する必要がなく、さまざまな新しいCSS機能も非常に楽しく使用できますが、大きな山が迫っています。それは解像度の適応です。モバイル端末の表示領域は比較的小さいため、解像度の異なる携帯電話でのページの表示詳細もより厳しくする必要があります。このとき、PC端末のような幅と高さを固定したレイアウト方法は明らかに適していません。さまざまなサイズの携帯電話ページに適応できることが求められています。本当にとても興味深いです。 では、早速、モバイル端末向けの一般的な適応手法をいくつか紹介します。 1. パーセンテージ 使用シナリオ: テキストブロックなど、画面に合わせて幅のみを調整する必要がある パーセンテージはPC適応でもよく使われ、本当に使いやすいのですが、一般的には幅適応の設定に使われます。高さをパーセンテージで設定する場合、その親要素には明確な高さが必要です。 1. パーセンテージを使用して全画面を埋める 要素の高さを 100% 有効にしてウィンドウの高さと正確に一致させるには、html 要素と body 要素、およびそれらのすべての親要素の高さを 100% に設定する必要があります。 例えば: <html スタイル="高さ: 100%;"> <body style="height: 100%;"> <div class="wrap" style="高さ: 100%; 幅: 100%"> 全画面に表示する</div> </本文> </html> 高さ 100% を使用する場合の注意事項:
ここまで書いてきて、突然余談したくなりました。絶対配置の要素の場合、height: 100% の使用は明らかに無効です。なぜなら、この時点ではドキュメント フローから分離されており、その高さは独自のコンテンツによってサポートされているためです。親ボックスを埋めたい場合はどうすればいいでしょうか?ここには黒魔術があり、上、左、下、右を 0 に設定すると、ボックスは親ボックスを埋めるために引き伸ばされます。 2. パーセンテージを使用してアスペクト比を修正する 場合によっては、幅を適応させ、高さを幅に合わせて変え、アスペクト比を固定したいことがあります。 見てみましょう。高さのパーセンテージを使用しても明らかに機能しません。高さのパーセンテージは親要素の高さに基づいており、幅に基づいて高さを設定する必要があります。 したがって、ここでは padding-top または padding-bottom を使用できます。パディングは親要素の幅に基づきます。要素の高さを 0 に設定し、padding-bottom を使用して要素を引き伸ばし、固定のアスペクト比を実現できます。 2. レム 使用シナリオ:写真など、高い適応性が求められるシーン rem単位: ページのルートフォントサイズ、つまりHTML要素のフォントサイズに基づきます。例: html{ フォントサイズ:16px; } すると、1rem は 16px に等しくなります。 したがって、これを使用する場合は、ルート フォント サイズを画面サイズに合わせて調整するだけで、幅と高さを設定するために rem 単位を使用するページ上のすべての要素も画面サイズに合わせて調整されます。 さまざまな画面サイズに応じてルート フォント サイズを設定するには、次の 2 つの方法があります。 1. remを設定するCSSメソッド メディア クエリを使用して、さまざまな画面サイズに応じて設定します。欠点は、一般的にいくつかの代表的な画面サイズのみがリストされ、適応によってすべての範囲を完全にカバーできないことです。 html{ フォントサイズ:10px } @media スクリーンと (最小幅:321px) と (最大幅:375px) { html{ フォントサイズ:11px } } @media スクリーンと (最小幅:376px) と (最大幅:414px) { html{ フォントサイズ:12px } } @media スクリーンと (最小幅:415px) と (最大幅:639px) { html{ フォントサイズ:15px } } @media スクリーンと (最小幅:640px) と (最大幅:719px) { html{ フォントサイズ:20px } } @media スクリーンと (最小幅:720px) と (最大幅:749px) { html{ フォントサイズ:22.5px } } @media スクリーンと (最小幅:750px) と (最大幅:799px) { html{ フォントサイズ:23.5px } } @media スクリーンと (min-width:800px) { html{ フォントサイズ:25px } } 2. remを設定するJSメソッド ルートフォントサイズはJSを使用して設定されるため、レンダリングが完了した後に変更が発生すると、リフローが発生し、フラッシュ画面が発生します。したがって、この方法を使用する場合は、JS コードをヘッド内に、CSS が導入される前に配置する必要があります。 (関数 (doc, win) { var docEl = doc.documentElement、 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 再計算 = 関数 () { var clientWidth = docEl.clientWidth; if (!clientWidth) 戻り値: docEl.style.fontSize = 20 * (clientWidth / 375) + 'px'; }; 再計算(); doc.addEventListener の場合、戻り値は次のようになります。 win.addEventListener(resizeEvt、recalc、false); })(ドキュメント、ウィンドウ); 上記において、clientWidth は実際の画面幅、375 はデザインの基準となる参照画面幅、20 は実際の画面幅が参照画面幅と等しい場合の 1rem のサイズです。コードのキーパラメータ 20 と 375 は次のように設定されています。 a) 提供されているデザイン案は基本的にiPhone 6/7/8を基準にしており、幅750px、dpr2となっているため、remを計算する際の基準画面幅は375に設定できます。 b) Chromeの最小フォントサイズは12pxなので、計算の便宜上、1remのサイズは20pxに設定できます。 3. メディアに関するお問い合わせ 使用シナリオ: メディアクエリは通常、次のような特別な処理に使用されます。 1. iPhoneXなどのフルスクリーンデバイスへの適応 2. iPhone Plusなどの超大型画面や、DPR 3のパッドの横画面に適応する場合は、業務ニーズに応じて臨界値を設定して、異なるコンテンツを表示したり、異なる解像度の画像を置き換えたり(つまり、2倍の画像と3倍の画像の使用)する必要があります。 4. ウ、ウ vwは画面の幅に基づいたパーセンテージ単位です。1vw=1% * deviceWidth vhは画面の高さに基づくパーセンテージ単位です。1v=1% * deviceHeight vw と vh は確かに非常に便利ですが、使用時には互換性の問題を考慮する必要があります。一部の国産携帯電話 (Huawei など) に付属するブラウザーでは失敗し、X5 カーネルを使用する場合には問題が発生しやすいと言われています。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。
>>: タブ切り替えを実装するための HTML サンプル コード
この記事では、指定された日付間のカウントダウンを実装するためのVueの具体的なコードを例として紹介し...
数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...
説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...
1. リテラルとローカル変数へのアクセスは最も高速ですが、配列要素とオブジェクト メンバーへのアクセ...
目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...
これは非常にシンプルな純粋な CSS3 の白い雲の浮遊する背景効果です。浮かぶ白い雲の特殊効果は、C...
この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...
概要MySQL データベースで主キーのないテーブルを表示するための SQL ステートメントをいくつか...
まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...
SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...
具体的なコードは次のとおりです。 HTMLコードは次のとおりです <div class=&qu...
サーバーデータがSSL証明書を使用して暗号化および認証されていない場合、ユーザーのデータはプレーンテ...
目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...
Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...
EXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情報を提供します...