ホームページ ウェブフロントエンド H5 チュートリアル レスポンシブとアダプティブの違いは何ですか

レスポンシブとアダプティブの違いは何ですか

May 10, 2018 pm 03:43 PM
違い

まずレスポンシブとアダプティブの違いを体験させてください。画面を拡大または縮小して試してみてください。
アダプティブ エクスペリエンス http://m.ctrip.com/html5/

レスポンシブ エクスペリエンス http://www. /

いくつかのアダプティブでレスポンシブな記事を編集し、抜粋して修正しましたので、お楽しみください:
当初、Web デザイナーは固定幅のページをデザインしていました。当時はもともとコンピューターの数が少なかったので、変更があったとしても、その数は依然として 800、850、870、880 です。たとえば、Open Source China の Web ページは、998 の固定幅でカスタマイズされています。なぜ998なのかというと、
その後、モニターの数が増え、ノートブックが普及するにつれて、このページの方法には問題が発生しました。そこで、幅適応レイアウトという新しいレイアウト方法が登場しました。私たちが通常話しているアダプティブ レイアウトは、主に幅アダプティブ レイアウトを指します。
このレイアウトの下で、2 つの流派が登場しました:
パーセンテージ幅レイアウト

フロー レイアウト

質問者は、幅にパーセンテージを使用し、テキストに em を使用する最初の流派について話しています。現在、多くの人が rem、つまり、rem を使い始めています。いわゆる HD ソリューション。レイアウトの 2 番目のグループは iGoogle によって表されます (廃止されました)。
最初は単語に反応するレイアウトがありませんでしたが、徐々に単語が表示され、新しい単語が常に古い単語と一緒に表示されます。 3G が登場する前と同じように、携帯電話を 2G と呼ぶ人は誰もいなかったため、3G と 2G という用語が一緒に登場しました (もちろん、技術的には 2G テクノロジーが先に登場しました)。同様に、プログレッシブエンハンスメントの出現後、「グレースフルデグラデーション」という別の用語も登場しました。
単語の意味は wiki と Google で確認できます。ここでは例として gmail と qqmail のみを示します。
どちらの幅も 100% で、どちらも適応可能です。ただし:
qqmail は、CSS ハックの完璧な具現化です。Tencent のフロントエンド エンジニアは、統一されたユーザー エクスペリエンスを目的として、さまざまな CSS ハック テクノロジーを使用して、ほぼ同じメールボックスを表示できます。
Gmail はプログレッシブ エンハンスメントを使用しており、ブラウザが強力であればあるほど、より良い効果が得られ、ユーザー エクスペリエンスが向上します。
その後、誰もが知っているように、Google が Android をリリースし、インターネット戦争は PC から携帯電話へと移りました。 HTML5 標準のリリースもあります。
携帯電話の画面は小さくなりましたが、より豊富な機能が提供されています。 Nokia を使用して QQ にアクセスしたときのことを覚えていますか?当時、私は ZTE 携帯電話を使用して wap.qq.com にアクセスしました。その後のスマートフォンでは、m.qq.com にアクセスしました。
「携帯電話ごとに Web ページをデザインする必要があるの?」「携帯電話用とコンピューター用に異なる Web ページをデザインする必要があるの?」と思わずにはいられない人もいます。ソリューションについては、css zen garden をご覧ください (「Css Secret Garden」は今でも非常に良い本です。
最終的なソリューションの勝者はレスポンシブ レイアウトです。
レスポンシブ レイアウトがよく知られている重要な理由は、Twitter がオープンソースのブートストラップを提供していることです。
応答性と適応性の違いをもっと直観的に見てみましょう:

まず、問題を解決する 2 つの方法は異なります

適応性とは、どのように問題を解決するかということです。異なるサイズのデバイスで同じ Web ページを表示します

携帯電話の画面は比較的小さく、通常、PC の画面幅は 1000 ピクセルを超えます。主流の幅は 1366×768)、中には 2000 ピクセルに達するものもあります。異なるサイズの画面で同じコンテンツを満足のいく結果で表示するのは簡単ではありません

多くの Web サイトの解決策は、異なるデバイスに異なる Web ページを提供することです。専用のWebページを用意する、あるいはiPhone/iPad版を用意するなどの工夫が必要ですが、同時に複数のバージョンを維持する必要があり、Webサイトに複数のポータルがある場合には手間が大幅に増加します。アーキテクチャ設計の複雑さのため、同じ Web ページが異なるサイズの画面に自動的に適応し、Web のサイズを自動的に調整できるように、「一度設計すれば普遍的に適用できる」ことが可能かどうかを長い間想像してきた人もいます。

しかし、何があっても、メインのコンテンツとレイアウトは変更されていません

応答性の概念は適応性をカバーする必要があり、より多くのコンテンツをカバーする必要があります

適応にはまだ問題があります。画面が小さすぎる場合、Web ページは画面サイズに適応できますが、小さな画面で表示するとコンテンツが混雑しているように感じられます。この問題を自動的に解決するために考え出された概念です。画面幅を認識し、それに応じて Web デザイン、レイアウト、表示内容を調整します。以下の URL の画面幅が 1300 ピクセルを超える場合、6 つの画像が並べて配置されます。

画面幅が600ピクセルから1300ピクセルの間の場合、6枚の写真は2行に分割されます。

画面幅が400ピクセルから600ピクセルの間の場合、ナビゲーションバーはWebページの先頭に移動します。

画面幅が400ピクセル未満の場合、6枚の写真は3行に分割されます。

mediaqueri.es には、上記のような例が他にもあります。

いろいろ言いましたが、実際には、誰もがそれをどのように実装するかについてもっと心配しているかもしれません。実装方法について話しましょう:

1. Web ページの幅を自動的に調整できるようにします

「アダプティブ Web デザイン」はどのように機能しますか?そんなに難しいことではありません。

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

print?
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<meta name="viewport" content="width=device-width, initial-scale=1" />
ログイン後にコピー

viewport は、Web ページのデフォルトの幅と高さです。上記のコード行は、Web ページの幅がデフォルトで画面の幅 (width=device-width) と、元のスケーリング率 (initial-width) に等しいことを意味します。 scale=1) は 1.0 で、Web ページのサイズが画面領域の 100% を占めます。

IE9 を含むすべての主要なブラウザーがこの設定をサポートしています。古いブラウザ (主に IE6、7、8) の場合は、css3-mediaqueries.js を使用する必要があります。

print?
<!–[if lt IE 9]>
    <script src=“http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
  <![endif]–>
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
ログイン後にコピー

2. 絶対幅をできるだけ少なくする

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

具体的には、CSS コードではピクセル幅を指定できません:

print?
width:xxx px;  
width:xxx px;
ログイン後にコピー

はパーセント幅を指定することで置き換えられます: 同時に、CSS の cal と併用して幅を計算することもできます

width: xx%;  
width: xx%;
ログイン後にコピー

または

print?
width:auto;  
width:auto;
ログイン後にコピー

3相対サイズのフォント

フォントも絶対サイズ(px)は使用できませんが、フォントサイズに制限されず、相対サイズ(em)または高解像度スキーム(rem)のみが使用可能です。パーセンテージの代わりに幅を使用することもできます。

print?
body {  
    font: normal 100% Helvetica, Arial, sans-serif;  
  }  
body {
    font: normal 100% Helvetica, Arial, sans-serif;
  }
ログイン後にコピー

上記のコードは、フォント サイズがページのデフォルト サイズ (16 ピクセル) の 100% であることを指定しています。

print?
h1 {  
    font-size: 1.5em;   
  }  
h1 {
    font-size: 1.5em; 
  }
ログイン後にコピー

すると、h1 のサイズはデフォルトの 24 ピクセル (24/16=1.5) の 1.5 倍になります。

print?
small {  
  font-size: 0.875em;  
}  
  small {
    font-size: 0.875em;
  }
ログイン後にコピー

小さい要素のサイズは、デフォルト サイズの 0.875 倍、つまり 14 ピクセル (14/16=0.875) です。

4. 流体グリッド

「流体グリッド」の意味は、各ブロックの位置が固定されておらず、浮遊していることです。詳細については、流体レイアウトに関する記事を参照してください。

print?
.main {  
    float: right;  
    width: 70%;   
  }  
  .leftBar {  
    float: left;  
    width: 25%;  
  }  
.main {
    float: right;
    width: 70%; 
  }
  .leftBar {
    float: left;
    width: 25%;
  }
ログイン後にコピー

float の利点は、幅が小さすぎて 2 つの要素に収まらない場合、次の要素が水平方向にオーバーフローすることなく前の要素の一番下まで自動的にスクロールし、水平スクロール バーの表示を回避できることです。

また、絶対位置決め(position:Absolute)を使用する場合は十分に注意する必要があります。

5. CSS の読み込みを選択します

「アダプティブ Web デザイン」の中核は、CSS3 で導入された Media Query モジュールです。

これは、画面の幅を自動的に検出し、対応する CSS ファイルをロードすることを意味します。

print?
<link rel=“stylesheet” type=“text/css”
    media=“screen and (max-device-width: 400px)”
    href=“tinyScreen.css” />
<link rel="stylesheet" type="text/css"
    media="screen and (max-device-width: 400px)"
    href="tinyScreen.css" />
ログイン後にコピー


上記のコードは、画面の幅が 400 ピクセル (max-device-width: 400px) 未満の場合、tinyScreen.css ファイルをロードすることを意味します。

print?
<link rel=“stylesheet” type=“text/css”
    media=“screen and (min-width: 400px) and (max-device-width: 600px)”
    href=“smallScreen.css” />
<link rel="stylesheet" type="text/css"
    media="screen and (min-width: 400px) and (max-device-width: 600px)"
    href="smallScreen.css" />
ログイン後にコピー

画面幅が 400 ピクセルから 600 ピクセルの間の場合、smallScreen.css ファイルが読み込まれます。

HTMLタグを含むCSSファイルを読み込むだけでなく、既存のCSSファイルにCSSファイルを読み込むこともできます。

print?
@import  url(“tinyScreen.css”) screen and (max-device-width: 400px);  
 @import  url("tinyScreen.css") screen and (max-device-width: 400px);
ログイン後にコピー

6. CSS @media ルール

同じ CSS ファイルで、異なる画面解像度に応じて異なる CSS ルールを適用することも選択できます。

print?
@media  screen and (max-device-width: 400px) {  
    .column {  
      float: none;  
      width:auto;  
    }  
    #sidebar {  
      display:none;  
    }  
  }  
@media  screen and (max-device-width: 400px) {
    .column {
      float: none;
      width:auto;
    }
    #sidebar {
      display:none;
    }
  }
ログイン後にコピー

上記のコードは、画面幅が 400 ピクセル未満の場合、列ブロックはフロート解除され (float:none)、幅は自動的に調整され (width:auto)、サイドバー ブロックは表示されないことを意味します。 (表示:なし)。

7. アダプティブ画像 (流体画像)

レイアウトとテキストに加えて、「アダプティブ Web デザイン」では画像の自動スケーリングも実装する必要があります。

これに必要な CSS コードは 1 行だけです:

print?
img { max-width: 100%;}  
img { max-width: 100%;}
ログイン後にコピー

このコード行は、Web ページに埋め込まれているほとんどのビデオにも有効なので、次のように記述できます:

print?
img, object { max-width: 100%;}  
img, object { max-width: 100%;}
ログイン後にコピー

IE の古いバージョンでは最大幅がサポートされていません。

print?
img { width: 100%; }  
img { width: 100%; }
ログイン後にコピー

さらに、Windows プラットフォームで画像を拡大縮小すると、画像の歪みが発生する可能性があります。現時点では、IE 独自のコマンド

print?
img { -ms-interpolation-mode: bicubic; }  
img { -ms-interpolation-mode: bicubic; }
ログイン後にコピー

または Ethan Marcotte の imgSizer.js の使用を試みることができます。

print?
addLoadEvent(function() {  
    var imgs = document.getElementById(“content”).getElementsByTagName(“img”);  
    imgSizer.collate(imgs);  
  });  
addLoadEvent(function() {
    var imgs = document.getElementById("content").getElementsByTagName("img");
    imgSizer.collate(imgs);
  });
ログイン後にコピー

ただし、可能であれば、さまざまな画面サイズに応じて、さまざまな解像度の画像を読み込むことが最善です。これを行うには、サーバー側とクライアント側の両方でさまざまな方法があります。

以上がレスポンシブとアダプティブの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

Deepseek R1とV3バージョンの違いは何ですか Deepseek R1とV3バージョンの違いは何ですか Feb 19, 2025 pm 03:24 PM

DeepSeek:R1とV3バージョンの詳細な比較は、最高のAIアシスタントを選択するのに役立ちます! Deepseekにはすでに数千万人のユーザーがいて、そのAIの対話機能は好評を博しています。しかし、R1およびV3バージョンに面しているときに混乱していますか?この記事では、2つの違いを詳細に説明して、最適なバージョンを選択するのに役立ちます。 DeepSeeKR1とV3バージョンのコアの違い:V3バージョンの設計目標は、複雑な問題推論、ディープロジック分析、多機能大型言語モデルに焦点を当てており、スケーラビリティと効率アーキテクチャ、パラメーター強化学習最適化アーキテクチャ、パラメータースケール1.5に焦点を当てています。 10億から700億人のMOEハイブリッドの専門家アーキテクチャ、合計パラメーターは6710億にもなり、各トークンは370億を活性化します

DeepSeek使用のためのFAQの概要 DeepSeek使用のためのFAQの概要 Feb 19, 2025 pm 03:45 PM

Deepseekai ToolユーザーガイドとFAQ Deepseekは、強力なAIインテリジェントツールです。 FAQ:異なるアクセス方法の違い:Webバージョン、アプリバージョン、API呼び出しの間に機能に違いはありません。アプリは、Webバージョンのラッパーにすぎません。ローカル展開は蒸留モデルを使用します。これは、DeepSeek-R1のフルバージョンよりもわずかに劣っていますが、32ビットモデルには理論的には90%のフルバージョン機能があります。居酒屋とは何ですか? Sillytavernは、APIまたはOllamaを介してAIモデルを呼び出す必要があるフロントエンドインターフェイスです。壊れた制限とは何ですか

ビットコインには株式がありますか? ビットコインには株式がありますか? Mar 03, 2025 pm 06:42 PM

暗号通貨市場は活況を呈しており、リーダーとしてのビットコインは多くの投資家の注目を集めています。多くの人が好奇心が強い:ビットコインには在庫がありますか?答えはノーです。ビットコイン自体は株式ではありませんが、投資家はさまざまなチャネルを通じてビットコイン関連の資産に間接的に投資することができます。これについては、この記事で詳しく説明します。ビットコイン投資の代替品:ビットコインに直接投資する代わりに、投資家はビットコイン市場に参加できます:ビットコインETF:これは、資産ポートフォリオにビットコインまたはビットコイン先物契約が含まれている株式取引市場で取引されています。これは、ビットコインを直接保持することなく、在庫投資に慣れている投資家にとって比較的便利なオプションです。ビットコインマイニングカンパニー株:これらの企業のビジネスはビットコインマイニングとビットコインの保有です

市場前取引とアフターマーケット取引の違いは何ですか?市場前と市場外の取引の違いの詳細な説明 市場前取引とアフターマーケット取引の違いは何ですか?市場前と市場外の取引の違いの詳細な説明 Mar 03, 2025 pm 11:54 PM

従来の金融市場では、市場前および市場外の取引とは、通常の取引期間以外の取引活動を指します。暗号通貨市場は24時間取引されていますが、Bitgetのようなトレーディングプラットフォームは、同様の機能、特に株式と暗号通貨を同時に取引する包括的なプラットフォームも提供しています。この記事では、市場前と市場の取引の違いを明確にし、通貨価格への影響を調査します。市場前取引とアフターマーケット取引の4つの大きな違い:市場前取引とアフターマーケット取引と通常の取引期間の主な違いは、取引時間、流動性、価格変動、取引量:取引時間:取引時間:公式取引が開始される前に行われる4つの側面にあります。流動性:営業時間前後の取引の流動性は低く、トレーダーはほとんどありません。

なぜビテンサーはAIトラックの「ビットコイン」と言われているのですか? なぜビテンサーはAIトラックの「ビットコイン」と言われているのですか? Mar 04, 2025 pm 04:06 PM

元のタイトル:Bittensor = Aibitcoin:S4MMYETH、分散型AI研究元の翻訳:Zhouzhou、BlockBeats編集者注:この記事では、Bockchain Technologyを通じて中央集権的なAI企業の独占を破り、オープンおよび共同AI Ecosemsytemを促進することを望んでいます。 Bittensorは、さまざまなAIソリューションの出現を可能にし、Tao Tokensを通じてイノベーションを刺激するサブネットモデルを採用しています。 AI市場は成熟していますが、両節は競争リスクに直面し、他のオープンソースの対象となる場合があります

韓国のビットコインと国内のビットコインに違いはありますか? 韓国のビットコインと国内のビットコインに違いはありますか? Mar 05, 2025 pm 06:51 PM

ビットコインの投資ブームは、世界初の分散型デジタル資産であるため、増加し続けています。中国はかつてビットコインの最大の市場でしたが、政策の影響は取引制限につながりました。今日、韓国は世界の主要なビットコイン市場の1つになっており、投資家はITとその国内ビットコインの違いに疑問を投げかけています。この記事では、両国のビットコイン市場間の違いに関する詳細な分析を行います。韓国と中国のビットコイン市場の違いの分析。たとえば、2024年10月下旬、韓国のビットコインの価格はかつてでした

Pepeは大規模に購入して売り切れ、Mutmは2025年により賢い投資ですか? Pepeは大規模に購入して売り切れ、Mutmは2025年により賢い投資ですか? Mar 03, 2025 pm 07:09 PM

Pepeの急増の後、Mutmは2025年により安定した投資選択になることができますか? Pepe(Pepe)は初期の投資家を収益性を高めましたが、その暴力的な価格の変動は、多くの人々がその長期的な見通しに疑問を抱かせました。ミーム通貨市場が乱流を続けているため、トレーダーはより基本的な利点を持つプロジェクトに焦点を合わせ始めており、Mutuumfinance(MUTM)もその1つです。これは、実際の金融アプリケーションに焦点を当てた分散型貸出プラットフォームです。投機的な投機に依存しているPepeとは異なり、MUTMは、ユーザーが受動的収入を借りて獲得できる構造化されたdefiエコシステムを構築します。その前販売は100万米ドルを超えており、トークンの販売率の第1フェーズは97%を超え、早期投資

垂直プロキシ:アプリケーションシナリオと暗号化の破壊的可能性の解釈ネイティブプロキシ 垂直プロキシ:アプリケーションシナリオと暗号化の破壊的可能性の解釈ネイティブプロキシ Mar 04, 2025 am 10:21 AM

人工知能エージェント(AIAGENTS)は、大企業から中小企業まで、企業の日常業務に急速に統合されており、販売、マーケティング、金融、法律、IT、プロジェクト管理、ロジスティクス、顧客サービス、ワークフローオートメーションなど、ほとんどすべての分野を使用し始めています。私たちは、データの手動処理の時代から、繰り返しタスクの実行、Excelテーブルを使用してAIエージェントが24時間体制の自律操作の時代に移動しています。これにより、効率が向上するだけでなく、コストが大幅に削減されます。 Web2のAIエージェントのアプリケーションケース:Ycombinatorの視点Apten:AIとSMSテクノロジーを組み合わせた販売およびマーケティング最適化ツール。 Bildai:建築青写真を読むことができるモデル、

See all articles