0

HTML5 を使用して、すべてのモバイル、タブレット、デスクトップを対象とした Web サイトの開発を開始しました。グーグルで調べたところ、以下のタグを使用すると、すべてのフォーム ファクターで必要に応じてサイトが再調整されることがわかりました。

<meta name="viewport" content="width=device-width" />

試してみたところ、魅力的なように思えますが、このサイトをデスクトップ (19 インチのディスプレイ) で表示すると、すべての要素が画面上でドラッグされて、100% に収まるように見えます。画面とそれは私には少し奇妙に見えます。

ウェブサイトのメイン コンテンツ (固定幅) を中央に配置し、デスクトップで表示すると画面全体に背景画像が表示されるようにするオプションはありますが、フォームが小さい画面で表示すると背景画像を縮小します。要素。

実際の例として、Twitter を見ると、私が提案している方法で動作し、メイン コンテンツを背景画像で中央に配置し、画面のサイズを縮小すると背景を縮小しますが、コンテンツ サイズをそのまま維持しようとします。

これを達成するための HTML5 または CSS3 に新しいプロパティがあるかどうか、誰かが私に提案できますか?

4

3 に答える 3

0

代わりに可変レイアウトを使用して ください https://www.google.com/search?q=fluid+layout+examples

また、サイトをレスポンシブにしたい場合は、CSS メディア クエリを参照してください。

于 2013-04-09T12:03:24.840 に答える
0

Media Queries (W3C)を必ず確認してください。それらを使用すると、画面の解像度、ビューポートの幅、または画面の向き (横または縦) に応じて、さまざまな CSS ルールを使用できます。

最小限の例を次に示します。

@media all {
    #wrapper {
        /* have some whitespace on the left and right */
        width: 80%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 800px) {
    /* on small screens, use the full width */
    #wrapper {
        width: 100%;
    }
}

ご覧のとおり、最初に で一般的なレイアウトを定義してから@media all { }、小さいデバイスに合わせてレイアウトを調整するのが賢明です。いくつかの例を見るには、 mediaqueri.esをチェックしてください

于 2013-04-09T12:12:45.067 に答える