0

HTML ページが完全に流動的になるように設計しています。

マークアップ (HTML) のすべての要素に対して、( style="height: *px;width: *px"'の代わりに) ' style="height: %;width: %"' を使用しています。

このアプローチは、ウィンドウの測定値を変更する場合を除いて、かなりうまく機能しているようです。その場合、Web ページ要素は位置を変更し、「互いに重なって」しまいます。

私はそれに対するかなり良い実行時（Javaスクリプト）ソリューションを思いつきました：

var elements = document.getElementsByTagName("*");
for (var i=0; i < elements.length; i++)
{

    if (elements[i].style.height) elements[i].style.height = elements[i].offsetHeight+"px";
    if (elements[i].style.width ) elements[i].style.width  = elements[i].offsetWidth +"px";
}

残っている唯一の問題は、ユーザーが最大化されていないウィンドウに URL を入力して Web サイトを開くと、ページがウィンドウのその部分に収まるということです。次に、ウィンドウを最大化すると、ページは以前の測定値のままになります。したがって、本質的に、ウィンドウの測定値を変更するときの最初の問題は解決しましたが、ウィンドウが最初に最大サイズの場合のみです。

この問題に取り組む方法についてのアイデアはありますか? (「% page-design」をそのまま維持したい場合)。

4

1 に答える 1

0

本当の答えは、「完全に流動的な設計」は「すべてにパーセンタイル測定を使用する」ことと同義ではないということだと思います。次のことを考慮する必要があります。

  • ウィンドウのサイズが変更されたときに特定の各要素が正確に何をすべきか
  • 画面のサイズを変更すると、一部の要素を表示/非表示にする必要がある場合があります
  • 要素には、最小幅と最大幅が指定されている可能性があります
  • 小さなディスプレイ (例: 480x800 モバイル) ではどうなりますか?
  • 大きなディスプレイ (例: 2560x1600 モニター) ではどうなりますか?

...そのことなど。流動的なデザインを機能させるために、すべての要素に適用できる一般的なソリューションはありません。

于 2012-10-30T05:02:29.210 に答える