Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題を考慮し、スタイルの変更の問題を解決する必要があります。では、この問題はどのように解決すればよいのでしょうか。現在、主に適応を使用して、高さ、幅、画像の適応の問題を解決しています。 PC とモバイル端末でまとめてみましょう。 通常、適応的な高さと幅を実行すると、画像はページのレイアウトに一般的に関連します。 1. 最小解像度は1024×768(従来の17インチモニター)で、最小幅は940ピクセル、960ピクセル、または一般的に使用されている980ピクセルを使用できます。 2. 1024*768の次に大きい解像度は1280*768なので、1200pxまたは1220pxをより大きなウェブページの幅として使用できます。 3. CSS3とHTML5をサポートする高度なブラウザでは、CSS3メディアクエリを使用して、Webページが異なる解像度でレイアウトタグを自動的に調整できるようにします。 4. CSS3 および HTML5 をサポートしていないブラウザ、特に IE8 シリーズ以下のブラウザでは、js および resize イベントを使用して HTML レイアウト タグの幅を制御する必要があります。 5. 幅の調整では、表示モジュールごとに異なる幅を計算する必要があり、HTML レイアウトを行うときに多くの計算と調整が必要になります。 6. 幅の適応 異なる幅のディスプレイ用にレイアウト要素を書くときによく使われるCSS 次に、js と css を使用して画面のサイズに適応する方法を見てみましょう。 1: 高さと幅の基本を理解する 以下に説明のための写真をいくつか示します。 ウェブページの表示領域の高さと幅は、document.body.clientHeight||document.body.clientWidthです。 ウェブページの本文領域の高さと幅は、document.body.scrollHeight||document.body.scrollWidth です (スクロール ホイールの長さを含む) スクロールすると表示されるウェブページの左上領域: document.body.scrollTop||document.body.scrollLeft 2: CSS 適応高さ 1. 2列レイアウト、左側は固定、右側は適応型 XML/HTMLコードでコンテンツをクリップボードにコピーする
2. 3 列レイアウト、両側は固定幅、中央は適応幅 XML/HTML コードの内容をクリップボードにコピーする
3 の右側まで実行されます。最小幅と最大幅に関しては 、次のコードのようにレイアウトと連動して考慮され、それによってレイアウトが変更されます。 XML/HTML コードコンテンツをクリップボードにコピーします
最小幅と最大幅とは何かを理解します。最小幅とは、要素に設定された最小幅を指します。最小幅に達すると、テキストを拡大縮小しても効果はありません 。最大幅は、すべての要素が到達できる上限であり、それ以上増やすことはできません。 3: CSSは適応型の高さを扱う XML/HTML コードコンテンツをクリップボードにコピーします
親レベルは子レベルの高さに応じて変化し、子レベルは親レベルの高さに応じて変化します。 XML/HTMLコードコンテンツをクリップボードにコピー
子divがfloat属性を使用している場合、すでに標準フローを離れているため、親divはコンテンツの高さに合わせて変化しません。解決策は、フローティングdivの下に空のdivを追加し、両方にclear属性を設定することです。 XML/HTMLコードコンテンツをクリップボードにコピー
高さの調整には、ここに記載されていない他の方法も多数あります。 height:auto など。 4: jsは高さと幅の適応の問題を処理します XML/HTMLコードコンテンツをクリップボードにコピー
幅適応コード: XML/HTML コードコンテンツをクリップボードに
5: モバイル端末の高さと幅の適応 モバイル端末は比較的簡単です。まず、Web ページ コードの先頭にビューポート タグの行を追加します。 <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> ビューポートは、Web ページのデフォルトの幅と高さです。上記は、Web ページの幅がデフォルトでデバイス画面の幅に等しく、元のスケーリング比が 1 であることを意味します。つまり、Web ページの初期サイズは画面領域の 100% を占めます。 1: Web ページは画面の幅に応じてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素は使用できません。これはとても重要です。 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : PCとモバイル端末間の適応問題に対する上記の迅速な解決策は、編集者があなたと共有するすべての内容です。これが参考になれば幸いです。また、123WORDPRESS.COMをサポートしていただければ幸いです。 |
<<: MySQLがフルテーブルスキャンを実行するいくつかの状況
>>: CSSはウェブページの列の左側が固定されていることを認識し、一番下までスクロールすると自動的に位置を調整します。
1. CDNこれは、Web サイト上で最もよく使用される加速機能です。分散サーバー レイアウトによ...
background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...
背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...
今日、mysql ポートを変更したいと思ったのですが、/etc/ ディレクトリに my.cnf ファ...
これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...
translate と transition は非常に強力で、習得するのは不可能だといつも感じていま...
1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...
<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...
長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...
MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...
商用データベースの場合、データベースのアップグレードは優先度が高く、バージョンアップのロードマップ、...
目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...
以前、Docker コンテナとローカル マシン間のファイル転送に関する記事を書きました。しかし、この...
ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...
1. MySQL WorkbenchをダウンロードするWorkbench は、MySQL のグラフィ...