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:
//html部分
< div id = " left " >左</div>
< div id = " bodyText " >本文</div>
//css 部分
*{margin:0;padding:0}
#left{float:left;width:200px;background:red;}
#bodyText{margin-left:200px;background:yellow;
方法2:
//html部分
< div id = " left " >左</div>
< div id = "本文" >
< div id = " bodyText " >本文</div>
</div>
//css 部分
#left{float:left;width:200px;background:red;margin-right:-100%;}
#body{width:100%;float:left;}
#bodyText{margin-left:200px;background:yellow;}

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

XML/HTML コードの内容をクリップボードにコピーする

方法 1

< div id = "left" >左</div> ----これはdivの位置に関連していることに注意してください
< div id = "右" >右</div>
< div id = " center " >センター</div>
//css 部分
#left{width:200px;background:red;float:left;}
#center{width:auto;background:blue;}
#right{width:200px;background:yellow;float:right;}
方法2:
HTML部分:
< div id = "本文" >
< div id = " center " >センター</div>
</div>
< div id = " left " >左</div>
< div id = "右" >右</div>
CSS 部分:
#body{width:100%;float:left;} //フローティングと width:100% を設定
#body #center{background:red;margin-left:200px;margin-right:300px;} //margin-left:100% の使用方法
#left{width:200px;background:yellow;margin-left:-100%;float:left}
#right{width:300px;background:blue;margin-left:-300px;float:left}
----- margin-left:-100% に設定すると、body の左側に実行されます。
----- margin-left:-300px (つまり、右の幅) に設定されている場合、body

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

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

XML/HTML コードコンテンツをクリップボードにコピーします

//html 部分
< div id = 'コンテナ' >
< div クラス= 'one' > </ div >
< div クラス= '2' > </ div >
< div クラス= 'three' > </ div >
</div>
//css 部分
#container{width:100%;}
.one{width:20%;background:red；}
.one,.two,.three{float:left; height:100px;}
.two{width:60%;background:yellow;}
.three{width:20%;background:blue;}
@media (max-width:800px){--ブラウザの幅が 800px 未満の場合
.one{width:40%;}
.two{width:60%}
.three{width:100%}
}
@media (max-width:400px)--ブラウザの幅が 400px 未満の場合
{
.one{width:100%}
.two{width:100%}
.three{width:100%}
}

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

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

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

XML/HTML コードコンテンツをクリップボードにコピーします

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

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

XML/HTMLコードコンテンツをクリップボードにコピー

< div id = "fj" >
私は親です
< div id = "zj1" >私は子供1です</ div >
< div id = "zj2" >私は子供2です</ div >
</div>
//css部分
#fj{border:4px solid red;}
#zj1{border:2px solid yellow;}
#zj2{border:2px solid blue;}----この場合、親の高さは子divの高さに合わせて変化します。

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

XML/HTMLコードコンテンツをクリップボードにコピー

< div id = "fj" >
私は親です
< div id = "zj1" >私は子供 11111111111111111111111111 </ div >
< div id = "zj2" >私は子供です 2222222222222222222222222222222222222222222222222222222222222222222222222222222
< / div >
< div id = "クリア" style = "clear:both" > </ div > ------ この文を削除すると、親divの高さは子divの高さに応じて変化しなくなります。
</div>
//css 部分
#fj{border:4px solid black;}
#zj1{border:2px solid yellow;float:left}
#zj2{border:2px solid blue;float:left}

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

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

XML/HTMLコードコンテンツをクリップボードにコピー

< div id = "div1" > 222222222222222222222 </ div >
//js部分
function setHeight(obj)
{
var temHeight = null ;
//FF
if(window.innerHeight)
{
temHeight = window.innerHeight ; //ページの高さとスクロールバーの高さを含む
}
else
{
temHeight = document.body &&document.body.clientHeight;
}
if(temHeight > document.body.clientHeight)//ページの高さ
{
oDiv.style.height = temHeight + "px";
}
そうでない場合
{
oDiv.style.height = document.body.clientHeight +"px";
}
}
window.onload = function ()
{
var oDiv = document .getElementById("div1");
getHeight(oDiv);
}

幅適応コード:

XML/HTML コードコンテンツをクリップボードに

setWidth(obj)
{
var screenWidth = window.screen.width ;
var width;
var imgURL;
if (screenWidth > = 1440)
{
幅= "1400px" ;
imgURL = "1400.png" ; // 異なる解像度で画像を設定する
}
else if (1024 < 画面幅&& 画面幅< 1440 ）
{
幅= "1200px" ;
imgURL = "1200.png" ;
}
そうでない場合 {
幅= "980px" ;
画像URL = "980.png" ;
}
obj.style.width =幅;
obj.style.backgroundImage = "url(" + imgURL + ")";
})

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

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

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

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

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

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

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

: : : : : : :

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

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

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

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

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