PCとモバイルの適応の問題に対する迅速な解決策

PCとモバイルの適応の問題に対する迅速な解決策

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コードでコンテンツをクリップボードにコピーする
  1. 方法 1:
  2. //html部分
  3. < div   id = " left " >左</div>   
  4. < div   id = " bodyText " >本文</div>   
  5. //css 部分
  6. *{margin:0;padding:0}
  7. #left{float:left;width:200px;background:red;}
  8. #bodyText{margin-left:200px;background:yellow;
  9.   
  10. 方法2:
  11. //html部分
  12. < div   id = " left " >左</div>   
  13. < div   id = "本文" >   
  14.      < div   id = " bodyText " >本文</div>   
  15. </div>​​   
  16. //css 部分
  17. #left{float:left;width:200px;background:red;margin-right:-100%;}
  18. #body{width:100%;float:left;}
  19. #bodyText{margin-left:200px;background:yellow;}

2. 3 列レイアウト、両側は固定幅、中央は適応幅

XML/HTML コードの内容をクリップボードにコピーする
  1. 方法 1
:
  1. < div   id = "left" >左</div> ----これはdivの位置に関連していることに注意してください
  2. < div   id = "右" >右</div>   
  3. < div   id = " center " >センター</div>   
  4. //css 部分
  5. #left{width:200px;background:red;float:left;}
  6. #center{width:auto;background:blue;}
  7. #right{width:200px;background:yellow;float:right;}
  8.   
  9. 方法2:
  10. HTML部分:
  11. < div   id = "本文" >   
  12.      < div   id = " center " >センター</div>   
  13. </div>​​   
  14. < div   id = " left " >左</div>   
  15. < div   id = "右" >右</div>   
  16. CSS 部分:
  17. #body{width:100%;float:left;} //フローティングと width:100% を設定
  18. #body #center{background:red;margin-left:200px;margin-right:300px;} //margin-left:100% の使用方法
  19. #left{width:200px;background:yellow;margin-left:-100%;float:left}
  20. #right{width:300px;background:blue;margin-left:-300px;float:left}
  21. ----- margin-left:-100% に設定すると、body の左側に実行されます。
  22. ----- margin-left:-300px (つまり、右の幅) に設定されている場合、body

3 の右側まで実行されます。最小幅と最大幅に関しては

、次のコードのようにレイアウトと連動して考慮され、それによってレイアウトが変更されます。

XML/HTML コードコンテンツをクリップボードにコピーします
  1. //html 部分
  2. < div   id = 'コンテナ' >   
  3.      < div  クラス= 'one' > </ div >   
  4.      < div  クラス= '2' > </ div >   
  5.      < div  クラス= 'three' > </ div >   
  6.   </div>​​   
  7.   
  8. //css 部分
  9. #container{width:100%;}
  10. .one{width:20%;background:red；}
  11. .one,.two,.three{float:left; height:100px;}
  12. .two{width:60%;background:yellow;}
  13. .three{width:20%;background:blue;}
  14. @media (max-width:800px){--ブラウザの幅が 800px 未満の場合
  15. .one{width:40%;}
  16. .two{width:60%}
  17. .three{width:100%}
  18. }
  19. @media (max-width:400px)--ブラウザの幅が 400px 未満の場合
  20. {
  21. .one{width:100%}
  22. .two{width:100%}
  23. .three{width:100%}
  24.      
  25. }

最小幅と最大幅とは何かを理解します。最小幅とは、要素に設定された最小幅を指します。最小幅に達すると、テキストを拡大縮小しても効果はありません

。最大幅は、すべての要素が到達できる上限であり、それ以上増やすことはできません。

3: CSSは適応型の高さを扱う

XML/HTML コードコンテンツをクリップボードにコピーします
  1. //コードのhtml部分
  2. < div   id = "フィット" > </ div >   
  3. //css コード
  4. html、body{margin:0;height:100%;}
  5. #fit{width:200px;background:yellow;height:100%;border:1px solid red;}
  6.   
  7. --ここでは、主要なブラウザとの互換性を保つために、html と body の両方にスタイルが追加されています。
  8. IE がプロミスキャス モードの場合、本文はウィンドウを高さの基準として使用します。本文を 100% に設定すると、ページの高さがウィンドウと同じになります。本文内のネストされた div もウィンドウの高さまで拡張できる
  9. ため、レイアウトはブラウザー ウィンドウのサイズに適応できます。フォーム > body > div (html、body {overflow:scroll} スクロールバー 1 層)
  10. ただし、標準モードの場合、body は html タグを高さの参照として使用し、html タグはウィンドウを参照として使用します。 そのため、body 100% だけでは、子 div が画面全体の 100% を占めることはできません。
  11. html がウィンドウ サイズを取得するように、html も 100% にする必要があります。フォーム>html>body>div (html、body {overflow:scroll} 2 層スクロール バー、html スクロール バーは使用されません)

親レベルは子レベルの高さに応じて変化し、子レベルは親レベルの高さに応じて変化します。

XML/HTMLコードコンテンツをクリップボードにコピー
  1. < div   id = "fj" >   
  2. 私は親です
  3.     < div   id = "zj1" >私は子供1です</ div >   
  4.     < div   id = "zj2" >私は子供2です</ div >   
  5. </div>​​   
  6. //css部分
  7. #fj{border:4px solid red;}
  8. #zj1{border:2px solid yellow;}
  9. #zj2{border:2px solid blue;}----この場合、親の高さは子divの高さに合わせて変化します。

子divがfloat属性を使用している場合、すでに標準フローを離れているため、親divはコンテンツの高さに合わせて変化しません。解決策は、フローティングdivの下に空のdivを追加し、両方にclear属性を設定することです。

XML/HTMLコードコンテンツをクリップボードにコピー
  1. < div   id = "fj" >   
  2. 私は親です
  3.     < div   id = "zj1" >私は子供 11111111111111111111111111 </ div >   
  4.     < div   id = "zj2" >私は子供です 2222222222222222222222222222222222222222222222222222222222222222222222222222222
  5. < / div >   
  6.     < div   id = "クリア"   style = "clear:both" > </ div > ------ この文を削除すると、親divの高さは子divの高さに応じて変化しなくなります。
  7. </div>​​   
  8. //css 部分
  9. #fj{border:4px solid black;}
  10. #zj1{border:2px solid yellow;float:left}
  11. #zj2{border:2px solid blue;float:left}

高さの調整には、ここに記載されていない他の方法も多数あります。 height:auto など。

4: jsは高さと幅の適応の問題を処理します

XML/HTMLコードコンテンツをクリップボードにコピー
  1. < div   id = "div1"   > 222222222222222222222 </ div >   
  2. //js部分
  3. function setHeight(obj)
  4. {
  5. var temHeight = null ;
  6. //FF
  7. if(window.innerHeight)
  8. {
  9.      temHeight = window.innerHeight ; //ページの高さとスクロールバーの高さを含む
  10. }
  11. else
  12. {
  13.       temHeight = document.body &&document.body.clientHeight;
  14. }
  15. if(temHeight > document.body.clientHeight)//ページの高さ
  16. {
  17.       oDiv.style.height = temHeight + "px";
  18. }
  19. そうでない場合
  20. {
  21.      oDiv.style.height = document.body.clientHeight +"px";
  22. }
  23. }
  24. window.onload = function ()
  25. {
  26. var oDiv = document .getElementById("div1");
  27. getHeight(oDiv);
  28. }

幅適応コード:

XML/HTML コードコンテンツをクリップボードに
    コピーfunction
  1. setWidth(obj)
  2. {
  3. var screenWidth = window.screen.width ;
  4. var width;
  5. var imgURL;
  6. if (screenWidth > = 1440)
  7. {
  8.          幅= "1400px" ;
  9.           imgURL = "1400.png" ; // 異なる解像度で画像を設定する
  10. }
  11. else if (1024 <  画面幅&& 画面幅<   1440 ）
  12. {
  13.          幅= "1200px" ;
  14.           imgURL = "1200.png" ;
  15. }
  16. そうでない場合 {
  17.           幅= "980px" ;
  18.           画像URL = "980.png" ;
  19. }
  20.         obj.style.width =幅;
  21.         obj.style.backgroundImage = "url(" + imgURL + ")";
  22. })

5: モバイル端末の高さと幅の適応

モバイル端末は比較的簡単です。まず、Web ページ コードの先頭にビューポート タグの行を追加します。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

ビューポートは、Web ページのデフォルトの幅と高さです。上記は、Web ページの幅がデフォルトでデバイス画面の幅に等しく、元のスケーリング比が 1 であることを意味します。つまり、Web ページの初期サイズは画面領域の 100% を占めます。

1: Web ページは画面の幅に応じてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素は使用できません。これはとても重要です。 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

:

:

: : : : : : : : : : : : : : : : : : : : : : :

: : : : : : : : : : : : : : : : : : : : : : : : :

: : : : : : : : : : : : : : : : : : : : : : : :

: : : : : : :

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

:

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

PCとモバイル端末間の適応問題に対する上記の迅速な解決策は、編集者があなたと共有するすべての内容です。これが参考になれば幸いです。また、123WORDPRESS.COMをサポートしていただければ幸いです。

<<:  MySQLがフルテーブルスキャンを実行するいくつかの状況

>>:  CSSはウェブページの列の左側が固定されていることを認識し、一番下までスクロールすると自動的に位置を調整します。

推薦する

ウェブサイトの高速化における CDN、SCDN、DCDN の違いは何ですか?どうやって選ぶ？

1. CDNこれは、Web サイト上で最もよく使用される加速機能です。分散サーバー レイアウトによ...

CSS 背景画像を設定するための 6 つの興味深いヒント

background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...

VMware vCenter の不正な任意ファイルアップロードの脆弱性 (CVE-2021-21972) について

背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...

Linux に mysql をインストールするときに /etc に my.cnf ファイルがない問題を解決する

今日、mysql ポートを変更したいと思ったのですが、/etc/ ディレクトリに my.cnf ファ...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

CSS3 で translate と transition を使用する方法

translate と transition は非常に強力で、習得するのは不可能だといつも感じていま...

同じ IP のアクセス頻度を制限するように nginx を設定する方法

1. nginx.conf の http{} に次のコードを追加します。 limit_conn_zo...

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...

MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...

MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

MySQL データベースのアップグレードにおけるいくつかの「落とし穴」

商用データベースの場合、データベースのアップグレードは優先度が高く、バージョンアップのロードマップ、...

Docker 上で Redis クラスターを構築する

目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...

ボリュームを使用してホストと Docker コンテナ間でファイルを転送する方法

以前、Docker コンテナとローカル マシン間のファイル転送に関する記事を書きました。しかし、この...

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

MySQL Workbenchのダウンロードと使用方法のチュートリアルの詳細な説明

1. MySQL WorkbenchをダウンロードするWorkbench は、MySQL のグラフィ...