ホームページ ウェブフロントエンド htmlチュートリアル PCとモバイル端末間の適応の問題をどう解決するか? _html/css_WEB-ITnose

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

Jun 24, 2016 am 11:18 AM

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,根据不同的屏幕大小,实现不同的布局。代码可看上面的列子。这里不再重复写。

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

     作者:向婷风

     出处:

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


 

 

 

    

    

 

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

See all articles