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

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

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

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

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

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

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

コードをコピーしますコードは次のとおりです:

• ホーム


• アイテム2
>
• 
  

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




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

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

コードをコピーします

コードは次のとおりです:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

。 nav {
パディング: 5px 0px 5px 0px;
マージン: 0px;
width: 100%;

.nav li { 幅: 300px; クリア: 両方; 背景色: #0094ff; }

.dvItem {

> 幅: 95%;
高さ: 600px;
背景色: #ff00a4;
}

.main {
width: 320px;
margin: 0px auto 0px auto;
}
}


全画面ブラウジングと従来のブラウジングに違いはありません。

違いは、以下に示すように、小さな画面に取り付けた場合、表示効果が非常に明らかであることです。




このサンプル コードをダウンロードします
/Files/risk/Index.rar