検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 を使用して Windows8_html5 チュートリアルのスキルに固執する Web サイトを実装する方法

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 15:49:401686ブラウズ

まず、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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5<ビデオ>カスタム コントロールのサンプル コードに DOM を使用する_html5 チュートリアル スキル次の記事：HTML5<ビデオ>カスタム コントロールのサンプル コードに DOM を使用する_html5 チュートリアル スキル

関連記事

続きを見る