HTML5 を使用して Windows8_html5 チュートリアルのスキルに固執する Web サイトを実装する方法

まず、Windows 8 の粘着性を見てみましょう。Windows 8 の Metro アプリケーションは、以下に示すように、非常にうまく画面を分割できます。

ユーザーは使用中に非常に便利に切り替えることができます。 このシステムには接着に関しても厳格な規制があります。画面は最大で 2 つあり、1 つは大、もう 1 つは小です。また、小画面の幅は 320 ピクセルに固定されます。

ユーザーが Web サイトを小さな画面に貼り付けると、デフォルトでページが縮小されます。以下に示すように:

では、このような問題をうまく解決するにはどうすればよいでしょうか? Windows 8 の小さな画面で Web サイトを非常に見やすく表示するにはどうすればよいですか?以下に簡単な例を示します

図に示すように、水平方向に配置されたナビゲーションやコンテンツなどを含む、非常にシンプルで伝統的なページです。

従来のコードにも同じことが当てはまります

このようなページを貼り付けると、以下に示すように縮小されます。




このような従来のページでは、ページを 320 ピクセルの幅でレイアウトして表示できるように、Windows 8 のスナップ機能に基づいて CSS を記述するだけで済みます。

実装コードは次のとおりです。次のスタイル コードを元のページに追加します