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

推薦する

Vue ポーリング リクエスト ソリューションの完全な例

世論調査の理解実際、ポーリングの焦点はループ自体ではなく、実行間の間隔にあります。 Ajax は非同...

vue-router 履歴モード サーバー側設定プロセス記録

歴史ルート履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装する...

MySQL トランザクション分離レベルの詳細

serializableシリアル化（問題なし）トランザクションは順次実行する必要があります。前のトラ...

HTMLでvueとel​​ement-uiを直接参照する方法

コードは次のようになります。 <!DOCTYPE html> <html> ...

スーパーバイザーウォッチドッグの使い方を3分で学ぶ

ソフトウェアとハ​​ードウェア環境centos7.6.1810 64ビット cat /etc/red...

MYSQLは時間（年、月、日）フィールドを変更されていない時間、分、秒に置き換えます。分析例

書き方1： sas_order_supply_month_pay セットを更新 RECEIVE_TI...

Linux サービスでファイアウォールを有効にする 2 つの方法

方法は2つあります: 1. サービス方法ファイアウォールのステータスを確認します。 [root@ce...

VMware ESXi サーバー仮想化クラスター

目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

JavaScriptにおける評価戦略の詳細な説明

目次それを覆う栗パラメータの受け渡し値渡し共同配送要約する拡張機能 - 遅延評価私は最近、JavaS...

Vue3 の動的コンポーネントはどのように機能しますか?

目次1. コンポーネントの登録1.1 グローバル登録1.2 グローバルコンポーネントの登録プロセス1...

シェルで文字列内のスペースや指定された文字を削除する方法

インターネット上には、正しい方法であっても、使用しても正しい結果が得られない方法が数多くあります。正...

vue.config.js パッケージ最適化構成

Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...

Linux 構成 SSH パスワードフリーログイン「ssh-keygen」の基本的な使い方

目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...