0

スケーラブルな HTML5 Web サイト デザインが必要です。私の考えは、body 要素で 1px の「基本」フォント サイズを定義し、「em」でこの値に対して相対的にすべての子要素を定義することです。

より正確には: 子要素 (画像、div など) のすべてのサイズ (幅、高さ、マージン、パディング、およびフォント サイズ) は「em」単位で定義されるため、 「ベース」のフォント サイズ (本文内)。

モバイル デバイスによって画面サイズが異なり、devicePixelRatio の値も異なるため、これを行う必要があります。

したがって、JavaScript を介してより大きな画面サイズ (例: 1.2 倍) を検出した場合font-size: 1.2px、body 要素だけを設定するだけで、Web サイト全体が 1.2 倍大きくなるはずです。

例：

<!doctype html>
<html>

    <head>
        <title>foo</title>

        <style>
            body{
                font-size: 1px;
                /* If a sceen is 1.2x bigger than this "default" size, then change font-size to 1.2px */
            }

            #myimg{
                /* 200em = 200px in this case because body font-size=1px */
                width: 200em;
                height: 200em;
            }

            #somediv{
                width: 100em;
                height: 100em;
                font-size: 20em;
            }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <img id="myimg" src="foo.jpg">
            <div id="somediv">
                foo
            </div>
        </div>
    </body>

</html>

唯一の問題は、font-size (たとえば 22em) が定義されているコンテナーが、子要素の新しい「ベース」font-size も定義することです。したがって、これは回避する必要があります。

スタイル例（あってはならない！）

#wrapper{
  font-size: 3px;
}

上記のスタイルが追加された場合、すべての子コンテナー (およびその子コンテナー) は 3 倍大きくなります (=私が望むものではありません)。

このアイデア全体は実用的なソリューションですか、それとも完全にスケーラブルな設計を作成するためのより良い方法はありますか?

4

1 に答える 1

-2

説明されているソリューションを試してみましたが、非常にうまく機能しました。また、これはかなり一般的な方法のように思われることにも注意しました。

変更することをお勧めする唯一のことは、(1px ではなく) 10px のベース フォント サイズを使用し、すべての子要素を 10 で割ることです。

于 2012-07-04T08:31:06.367 に答える