メディアクエリモジュールを学習する前に、応答性のレイアウトの最初の例は、シンプルなレイアウトとメディアクエリモジュールを介して、アプリケーションの応答を見て。本実施形態では、構造要素は、HTML5 5のボックスを定義します。ブラウザウィンドウのサイズが同じでない場合は、ページには、現在のウィンドウのサイズに応じて異なるスタイルを使用することを選択します。1000pxヘッダーとフッター、上記の、それぞれ上面及び全体ページの一番下の行の幅のウィンドウが表示されたら、中央本体は、3つの表示に分割されている; 640ピクセル時には、上記ウィンドウ幅、1000px以下、中間の第3列非表示、640ピクセル以下の幅のウィンドウは、5つのブロックが配置され、上から下に表示します。コードは次の通り：
このケースでは、各ブロックの再設定レイアウトに、それぞれのスタイルで異なるスタイルを通じて異なる画面解像度へのアクセスを得ることができるだけでなく、異なる画面解像度、フォント、写真を、レイアウトスタイルを変更する必要がありますそしてまた、あなたは、現在の画面に表示するコンテンツに合わせて背景画像のスタイルを再設定する必要があります。何を決定する決議については、製品の需要に完全に依存。携帯電話の解像度の一般的なタイプ、タブレットPC（これらの端末が存在横画面、縦画面の違いであることに注意してください）、960ピクセルディスプレイよりも一般的に大きいデスクトップモニターは、メディアクエリを使用することで判断せずにデフォルトのスタイルです。1〜3の図は異なる画面解像度に示す本実施形態の効果。
図1ウィンドウ幅1000px
図2に上記の640ピクセル幅のウィンドウは、次のページが表示されたとき1000px
ページ表示640ピクセル以下のウィンドウ幅の時には、図3
ウィンドウサイズの異なるスタイルのサブ領域では、あなたはスタイルが可能に変更するために再設定の必要限り、グローバルスタイルを継承することができます。また、右側のページを置くコンテンツのいくつかのマイナーなブロックがある、あなたはそれを隠すことができます。図2のように、ウィンドウ幅は640〜1000px、隠されたタイルの右側部分です。