PCとモバイル端末間の適応の問題をどう解決するか? _html/css

PCとモバイル端末間の適応の問題をどう解決するか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:18:24

オリジナル

1337 人が閲覧しました

Web ページを作成するとき、スタイルの変更の問題を解決するには、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題を考慮する必要があります。現在、自己調整は主に高さ、幅、画像の調整の問題を解決するために使用されます。高さ、幅、画像を調整する場合、通常はページのレイアウトに関連します。。

1. 最小サイズの解像度は 1024*768 (従来の 17 インチモニター)、最小幅として 940px、960px、または一般的に使用される 980px を使用できます

2 1024*768 の後のわずかに大きい解像度は 1280 です。 *768 、少し大きい Web ページ幅として 1200px または 1220px を使用できます

3. css3 および html5 をサポートする高度なブラウザーは、CSS3 メディアクエリを使用して、さまざまな解像度で Web ページのレイアウトタグを自動的に調整できます

4。 css3、html5 をサポート非常識なブラウザ、特に <=ie8 シリーズでは、HTML レイアウトタグの幅を制御するために js とサイズ変更イベントを使用する必要があります

5. HTML レイアウトを行う場合、幅の調整には表示モジュールごとに異なる幅の計算が必要です。多くの計算と適応が必要です。

6. 異なる幅のディスプレイのレイアウト要素を記述するときによく使用される幅適応 CSS

画面のサイズに適応するための js と css の使用方法を見てみましょう。

1: 高さと幅の基本を理解する

次の図を使用して説明します:

Web ページの表示領域の高さと幅は次のとおりです: document.body。 clientHeight||document.body.clientWidth

テキスト領域高さと幅は次のとおりです: document.body.scrollHeight||document.body.scrollWidth (スクロールホイールの長さを含む)

Web ページが配置される左上の領域スクロール: document.body.scrollTop||document.body.scrollLeft

2 つ: CSS 適応高さ

1. 2 列レイアウト、左側に固定、右側に適応幅

方法一：<br />//html部分<br /><div id="left">左边</div><div id="bodyText">正文</div>//css部分<br />*{margin:0;padding:0}<br />#left{float:left;width:200px;background:red;}<br />#bodyText{margin-left:200px;background:yellow；<br /><br />方法二：<br />//html部分<br /><div id="left">左边</div><br /><div id="body"><br />    <div id="bodyText">正文</div><br /></div><br />//css部分<br />#left{float:left;width:200px;background:red;margin-right:-100%;}<br />#body{width:100%;float:left;}<br />#bodyText{margin-left:200px;background:yellow;}

ログイン後にコピー

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

方法一：<br /><div id="left">左边</div>----注意和div的位置有关系<div id="right">右边</div><div id="center">中间</div><br />//css部分<br />#left{width:200px;background:red;float:left;}<br />#center{width:auto;background:blue;}<br />#right{width:200px;background:yellow;float:right;}<br /><br />方法二：<br />html部分：<br /><div id="body"><br />    <div id="center">中间</div><br /></div><br /><div id="left">左边</div><br /><div id="right">右边</div><br />css部分：<br />#body{width:100%;float:left;} //设置浮动和width:100%<br />#body #center{background:red;margin-left:200px;margin-right:300px;} //margin-left:100%的使用方法<br />#left{width:200px;background:yellow;margin-left:-100%;float:left}<br />#right{width:300px;background:blue;margin-left:-300px;float:left}<br />-----如果设置为margin-left:-100%，则会跑到body的左边。<br />-----如果设置为margin-left:-300px（即right的宽度），则会跑到body的右边<br />

ログイン後にコピー

3. 最小幅と最大幅について

ここでは、次のようなレイアウトを確認します。次のコード: 適応幅、それによってレイアウトを変更します。

すごいです

最小幅と最大幅とは何かを理解してください。最小幅は、要素に設定された最小幅を指します。最小幅に達すると、テキストのスケーリングは無効になります

最大幅は、すべての幅の上限です。要素はに達する可能性がありますが、増加し続けることはできません。

3 % は画面全体を占めます

HTML がウィンドウサイズを取得するように、HTML を 100% にする必要もあります。 Form》html》body》div (html, body {overflow:scroll} 2層スクロールバー、htmlスクロールバーは一切使用しません)

親は子の高さに合わせて適応的に変化し、子も親に合わせて変化しますコンテンツの高さが変更されたとき

//html部分<br /><div id='container'>    <div class='one'></div>    <div class='two'></div>    <div class='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%}  }

ログイン後にコピー

子 div が float 属性を使用している場合、コンテンツの高さが変更されても親 div は変更されません。解決策は、空のオブジェクトを追加することです。フローティング div の下のスペース、高さを調整するためにクリア属性を設定する方法はたくさんありますが、ここではリストしません。高さ:自動など。

4 Web ページのコードの先頭に、ビューポートタグの行を追加します。

ビューポートはWebページのデフォルトの幅と高さを意味します。デフォルトでは、Web ページはデバイスと同じになります。画面の幅は元の拡大縮小率 1 です。つまり、Web ページの初期サイズは画面領域の 100% を占めます。

1: Web ページは画面の幅に応じてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素を使用することはできません。これは非常に重要です。具体的には、CSS コードではピクセル幅を指定できません: width: xxx px; width: xx%; または width: auto のみを指定できます

2: 通常は em を使用し、px フォントの使用は最小限に抑えます

3: フローレイアウトを使用する

4：自适应网页设计”的核心，就是CSS3引入的media query模块。下载地址：http://download.csdn.net/download/song_121292057/8031781

自动探测屏幕宽度，然后加载相应的CSS文件。

    <link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)" href="style.css" /> <br /><br />-------当屏幕小于400时，就加载style.css这个文件

ログイン後にコピー

5：除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url("style2.css") screen and (max-device-width: 800px);//当小于800px屏幕时，就加载style2.css文件

6:图片的自动缩放，比较简单。只要一行CSS代码：img{ max-width: 100%;}建议根据不同的屏幕分辨率，加载不同大小像素的图片。

移动端的自适应，大体上差不多就这么多，主要核心是利用mediaquery,根据不同的屏幕大小，实现不同的布局。代码可看上面的列子。这里不再重复写。

大概总结了一下自己遇到的问题，还有什么好的方法，请给我留言哈！

作者：向婷风

出处：

本文版权归作者和博客园所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面