css3アダプティブレイアウトとは何ですか

アダプティブ レイアウト (別名「レスポンシブ レイアウト」) は、画面幅を自動的に認識し、それに応じて調整を行うことができる Web ページ レイアウトを指します。このような Web ページは、複数の異なる端末と互換性を持たせることができます。各ターミナルは特定のバージョンを作成します。アダプティブ レイアウトは、モバイル Web ブラウジングの問題を解決するために生まれ、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供できます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

アダプティブ レイアウトとは

「レスポンシブ レイアウト」とも呼ばれるアダプティブ レイアウトは、画面の幅を自動的に識別し、対応する変更を行うことができます。調整された Web ページ レイアウトは、端末ごとに特定のバージョンを作成するのではなく、Web ページが複数の異なる端末 (デバイス) と互換性があることを単に意味します。

実際、アダプティブと非アダプティブの違いは、簡単に言うと、デバイスの解像度に関係なくページが自動的に認識して適応し、閲覧ユーザーに優れたエクスペリエンスをもたらすことができることです。

このコンセプトは、モバイルでの Web ブラウジングの問題を解決するために生まれました。アダプティブ レイアウトは、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供することができ、大画面スマートフォンの普及により、「一般的なトレンド」と言っても過言ではありません。

#css3 でアダプティブ レイアウトを実装する方法

• CSS でメディア クエリを使用する (最も単純);

• JavaScript を使用する (高コスト);

• サードパーティのオープン ソース フレームワークを使用する (たとえば、ブートストラップはさまざまなブラウザを適切にサポートできます)。

1. メタ タグを設定します

• viewport: Web ページの表示領域を表すビューポート;

• width: ビューポートを制御します。サイズには、600 などの特定の値、またはキーワードで構成される特別な値を指定できます。たとえば、device-width はデバイスの幅を表します。

• initial-scale: 初期スケーリング比 (ページが最初にロードされたときのスケーリング比) を表します;

• #maximum-scale: 許可される最大スケーリング比を表しますユーザー、0 ～ 10.0 の範囲;

• minimum-scale: ユーザーが 0 ～ 10.0 の範囲の最小比率にズームできることを示します。
  user-scalable: ユーザーが手動でズームできるかどうかを示します。「はい」はスケーリングが許可されることを意味し、「いいえ」はスケーリングが禁止されることを意味します。
2. メディア クエリ

CSS メディア クエリは、指定された条件に基づいて、メディア タイプ (スクリーン プリント) ごとに異なる CSS を定義できます。さまざまなデバイスを使用するユーザーが最高のエクスペリエンスを得ることができるようにします。

@media (max-width: 320px) { /*0~320*/ body { background: pink; } } @media (min-width: 321px) and (max-width: 375px) { /*321~768*/ body { background: red; } } @media (min-width: 376px) and (max-width: 425px) { /*376~425*/ body { background: yellow; } } @media (min-width: 426px) and (max-width: 768px) { /*426~768*/ body { background: blue; } } @media (min-width: 769px) { /*769~+∞*/ body { background: green; } }

@import 'index01.css' screen and (max-width:1024px) and (min-width:720px) @import 'index02.css' screen and (max-width:720px)

       
  
 
 
 
header1
 
header2
 
header2
 
header2
 
header2
 
 
icon
 
 
 
 left 
 
 center 
 
 right 
 
  
  

(学習ビデオ共有:css ビデオ チュートリアル

Web フロントエンド)

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