3

私の質問は、CSS Fixed Layout とブラウザーの幅を埋めるために拡張する Float Layout を中心に展開しています。

現在、私が直面している問題は、ページの幅に応じてマストヘッドのサイズを変更することです ( CSS3 のbackground-image: size;現在のブラウザー実装では、これは不可能だと理解しています)。この時点で、行き詰まりに陥ったように感じます。固定の CSS レイアウトを使用するようにサイトを作り直すか、それとも現在のレイアウトを維持し、マストヘッドの画像を拡張して提供されたスペースのほとんどを埋めるようにしますか? ? さらに、固定幅レイアウトに移行することの長所と短所、およびあるレイアウトを別のレイアウトで使用することによるその他の (目に見えない) 影響は何ですか?

問題のサイトは、この質問に対するコメントとして提供されます。トラフィックを増やそうとしていると見なされたくありません。

編集：他に考えはありますか？

4

5 に答える 5

7

画像を拡大縮小するのではなく、ブラウザーのサイズが変更されたときに、画像を多かれ少なかれ表示するのはどうですか? まったく同じ効果ではありませんが、空間全体を画像で埋める簡単な方法です。

例として、マストヘッドの背景画像に、たとえば都市のスカイラインの写真の上に何らかのロゴが含まれているとします。これは、全体で 1600px 幅です。ロゴは画像の左側にあり、街並みは右端に広がっています。そして、マークアップはおおよそ次のようになっていると仮定します。

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

#page 要素を柔軟な幅に設定し、背景画像を #masthead 要素に適用できます。

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

ここで何が起こるかというと、#masthead 要素が #page 要素の幅に拡張され、ブラウザー ウィンドウの幅に応じて 800 ピクセルから 1600 ピクセルの幅 (両端を含む) になります。#page 要素の幅が 800 ピクセルの場合、スカイラインの左端の 800 ピクセルのみが表示されます。幅が 1600px の場合、スカイライン全体が表示されます。そうすれば、ロゴは常に表示され、ブラウザーのサイズを変更すると、街並みがより多く表示されます。

これには、最初に大きな画像を用意する必要があります (柔軟にする場合は、少なくとも最大幅と同じ幅)。ストレンジャーが言及した、ブラウザの画像サイズ変更アルゴリズム。

于 2008-12-02T11:01:04.943 に答える
2

どんなイメージですか？再現可能な部分はありますか？画像の繰り返し要素用のタグと固定要素用のタグの 2 つのレイヤーを使用する場合があります。

例を見ることができますか？問題の正しい答えにたどり着きやすくなります。

于 2008-12-02T10:17:21.680 に答える
1

background-image をページの幅に拡張しようとしている場合は、固定サイズのレイアウトを使用することをお勧めします。これは、背景画像をさまざまなサイズに拡張するためのクロスブラウザーの方法がないためです。訪問者の解像度。

固定幅のレイアウトは、設計者にとっては柔軟性がありますが、訪問者にとってはそうではありません。X ピクセル幅のレイアウトを作成すると、Web サイトをピクセルごとに好みに合わせて微調整できますが、「フロート」レイアウト (私はリキッド レイアウトと呼んでいます) は完全にパーセント値に基づいているため、異なるレイアウトになります。コンピューターからコンピューターへ。自分の画面でレイアウトをテストしても、他の人の画面ではどのように表示されるかわからないため、これは難しいと思います。また、(たとえば) 20px の余白は、768px または 960px の固定幅レイアウトでの効果よりも大きくなります。 1280px の液体のコンピューター画面。

固定幅レイアウトの主な短所である IMO は、大きな画面では小さすぎ、小さな画面では大きすぎるように見えるという事実です。768px はかなり標準的な固定幅のレイアウトでしたが、世界が 800x600 から遠ざかっているため、現在では小さすぎます。現在、960px はかなり標準的で、800x600 では大きすぎますが、1280x1024 ではまだ小さすぎます。

それはすべて、視聴者とサイトがどのように適合するかによって異なります. 一部のレイアウトは流動的にして完全に正常に動作しますが、他のレイアウトは修正する必要があります（説明したものなど）。

于 2008-12-01T03:39:43.230 に答える
1

テキスト列がブラウザーに拡張されるレイアウトを作成することは、一般的に悪い考えです。行が長くなるとテキストが読みにくくなります。text-column は、おそらく 50 文字程度の幅に固定することをお勧めします。

于 2008-12-02T18:03:45.310 に答える
1

背景画像を使用する代わりに、ヘッダー画像 (マストヘッド) に<img>タグを使用しないのはなぜですか?

ヘッダー グラフィックをスケーリングしないことをお勧めします。ほとんどのブラウザーは画像のスケーリングが苦手で (最近傍は何ですか?)、多くの人にとって見栄えがよくありません。

私は流動的/フロート/液体レイアウトを自分で支持しています。実際、私のサイトのほとんどは 1 つの列を使用しているため、「通常の」サイト レイアウトのすべての複雑さについて心配する必要はありません。

于 2008-12-01T03:52:15.170 に答える