ホームページ ウェブフロントエンド 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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

WebアノテーションにY軸位置の適応レイアウトを実装する方法は? WebアノテーションにY軸位置の適応レイアウトを実装する方法は? Apr 04, 2025 pm 11:30 PM

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? Apr 05, 2025 am 06:15 AM

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

See all articles