レスポンシブWebデザインの重要なポイント（RWD）

レスポンシブWebデザイン（RWD）は、さまざまな畫面サイズのデバイスでWebサイトにアクセスしやすくユーザーフレンドリーであることを確認するために不可欠です。 2010年にEthan Marcotteによって提案され、畫面のサイズやビューポートのサイズに関係なく、単一のWebサイトがあらゆるデバイスで適切に動作できるようになりました。

RWDは、HTMLビューポートメタタグ、メディアクエリ、CSSビューポートユニット、CSS列、CSSフレックスボックスとグリッド、JavaScript RWDオプションなど、さまざまな手法と方法を使用します。これらはすべて優(yōu)れたブラウザーサポートを備えており、CSSグリッドは現(xiàn)在、一般的に使用されるブラウザーのほぼ95％によってサポートされています。

RWDおよびクロスブラウザーの互換性のテストは重要であり、ブラウザ內(nèi)テスト、モバイルオペレーティングシステムシミュレーター、オンラインテストサービス、現(xiàn)実世界のデバイステストで行うことができます。ただし、各方法には獨自の制限があり、最も正確な結果を得るために組み合わせて使用??する必要があります。

オンラインテストサービス（LambDateStなど）により、ユーザーはWeb上のモバイルブラウザーでレスポンシブページをテストできます。これらのサービスには、スタイルの回帰または破損したユーザーインターフェイスをチェックするための自動テストAPIも含まれます。

実際の処理速度、タッチコントロール、および全體的な設計を評価できるため、RWDをテストするための最も正確な方法は、

実際のデバイステストです。できるだけ多くのデバイス、特に1年または2年使用されてきた一般的なデバイスでテストすることをお勧めします。

rwd

での作業(yè)方法 単一のRWDメソッドや手法はありません。

最初に、Webサイトのデザインがさまざまなサイズのモニターにどのように反応するかを判斷する必要があります。これは課題であり、多くの初期のRWD Webサイトが既存のデスクトップレイアウトを取得し、畫面サイズを縮小してコンテンツの一部を削除します。

より良いテクノロジーは「モバイルファースト」です。これは、すべてのデバイスで実行される線形モバイルビューから始まり、より多くのスペースとサポートされているブラウザー機能が利用可能な場合、コンテンツを再配置または調整します。最近、多くのウェブサイトがよりシンプルなレイアウトを採用しており、モバイルとデスクトップのエクスペリエンスがほとんど似ています。

RWDの典型的な例は、ハンバーガーメニューです。小規(guī)模な畫面にいるユーザーは、アイコンをクリックしてナビゲーションリンクを表示できますが、大型畫面のユーザーは水平リストのすべてのオプションを表示できます。

次のセクションでは、いくつかの技術的な実裝オプションを提供します。

html viewportメタタグ

どのRWDテクノロジーを使用しても、次のタグをHTMLで設定する必要があります。

設定では、モバイルブラウザが畫面幅に論理的なCSSピクセルをスケーリングすることを確認します。この設定がなければ、ブラウザはデスクトップWebサイトをレンダリングし、それに応じてスケーリングしていると想定して、パンとスケーリングを可能にします。

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-widthメディアクエリ

メディアクエリは、初期のRWD Webサイトの主な基礎でした。 CSSは、特定の範囲のビューポートサイズをターゲットにすることができます。たとえば、

<meta name="viewport" content="width=device-width, initial-scale=1">

メディアクエリはまだ使用されていますが、現(xiàn)在はあまり明示的ではありません。

<picture>要素

html<picture>要素は、メディアクエリの構文を使用して複數(shù)から制御するために使用します。 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173915575374245.jpg" class="lazy" alt="How to Test Responsive Web Design Cross-Browser Compatibility " /> </picture>cssビューポートユニット

cssユニット

および

は、それぞれビューポートの幅と高さの1％を表します。 vwは最小サイズの1％であり、vhは最大サイズの1％です。 vmin vmaxこれらは、特に

と組み合わせて使用??する場合、RWDの柔軟性を可能にします。たとえば、

calc

/* 應用于所有視圖的樣式 */
p {
  font-size: 1rem;
}

/* 應用于寬度介于 900px 和 1200px 之間的視口的樣式 */
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    font-size: 1.5rem;
  }
}

css列

CSSマルチコラムレイアウトは、コンテナサイズが大きくなるにつれて複數(shù)のテキスト列を作成する方法を提供します。たとえば、

/* 字號隨視口寬度增加而增加 */
p {
  font-size: 1rem + 0.5vw;
}

css flexboxおよびgrid

CSS FlexBoxとCSSグリッドは、コンテンツと利用可能なスペースに基づいて子要素をレイアウトするための最新のテクノロジーを提供します。主な違いは次のとおりです

FlexBoxは、1次元レイアウトに使用されます。必要に応じて要素を壊す（または壊れていない）可能性があるため、列が揃っていない場合があります。

グリッドは2次元レイアウトで使用され、通常は認識可能な行と列があります。

両方を使用して、「本質的なレイアウト」（ジェンシモンズによって発明された用語）を作成できます?；镜膜恕⒁丐违单ぅ氦?、メディアクエリのないビューポートのサイズに基づいて決定されます。たとえば、

javascript rwd options

/*
列的最小寬度必須為 12rem
每個列之間有 2rem 的間隙
*/
.container {
  columns: 12rem auto;
  column-gap: 2rem;
}

JavaScriptを使用して、ビューポートのサイズを決定し、それに応じて反応することもできます。たとえば、 同様に、

および

を使用して単一の要素のサイズをチェックできますが、

メソッドはピクセルの小數(shù)部を含むより多くの情報を返すことができます：

/*
子元素將至少為 20rem 并填充行。
小于 20rem 的顯示將子元素大小調整為 1fr
(可用寬度的 100%)。

1rem 的間隙將始終圍繞元素。
*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}

offsetWidthデバイスが回転するか、ブラウザウィンドウがサイズ変更されると、ウィンドウと要素のサイズが変更される場合があります。 offsetHeightAPIはCSSメディアクエリを解析し、変更をトリガーできます：getBoundingClientRect()

// 獲取視口寬度和高度
const vw = window.innerWidth, vh = window.innerHeight;

ブラウザサポートmatchMedia

const element = document.getElementById('myelement'),
      rect = element.getBoundingClientRect(),
      ew = rect.width,
      eh = rect.height;

上記のRWDテクノロジーはすべて、優(yōu)れたブラウザのサポートを備えています。最新のオプションであるCSSグリッドは、現(xiàn)在、一般的に使用されるブラウザーのほぼ95％によってサポートされています。ただし、さまざまなデバイス、解像度、ブラウザでWebサイトをテストする必要があります...

（次のコンテンツはスペースによって制限されます。アウトラインのみが保持されます。特定のコンテンツについては、元のテキストを參照してください）

in-browserテスト

モバイルオペレーティングシステムエミュレータ

• オンラインテストサービス（lambdatestなど）
• 実際の機器テスト
• 1つのWebサイト、複數(shù)のビュー
レスポンシブWebデザインとクロスブラウザー互換性に関するFAQ
この改訂された出力は、文を言い換え、同義語を使用して擬似オリジナリティを実現(xiàn)します。

以上がレスポンシブなWebデザインのクロスブラウザー互換性をテストする方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。