CSS：固定レイアウトまたはフロートレイアウト？ [閉まっている]

StackOverflow https://stackoverflow.com/questions/329900

  •  11-07-2019
  •  | 
  •  

質問

私の質問は、CSS固定レイアウトとブラウザーの幅いっぱいに広がるフロートレイアウトを中心に展開しています。

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

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

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

役に立ちましたか？

解決

画像のサイズを変更するのではなく、ブラウザのサイズを変更したときに、多少の画像の表示はどうですか？同じ効果ではありませんが、空間全体を画像で簡単に埋めることができます。

例のために、マストヘッドの背景画像に、たとえば都市のスカイラインの写真の上に何らかのロゴが含まれていると仮定しましょう。これは、全体として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要素の幅まで拡大することです。これは、ブラウザウィンドウの幅に応じて800px〜1600pxの幅（両端を含む）のどこかになります。 #page要素の幅が800ピクセルの場合、スカイラインの左端の800ピクセルのみが表示されます。幅が1600ピクセルの場合、スカイライン全体が表示されます。これにより、ロゴが常に表示され、ブラウザのサイズを変更すると、より多くの都市景観が表示されます。

これには、最初に大きな画像（少なくとも伸縮性がある場合は最大幅と同じ幅）が必要ですが、その結果、サイズに関係なく見栄えの良いマストヘッドが得られます。ストージャーが述べたように、ブラウザの画像サイズ変更アルゴリズムに。

他のヒント

どのような画像ですか？繰り返し可能な部分はありますか？画像の繰り返し要素に1つまたはタグを、固定要素に別の2つのレイヤーを使用することがあります。

例を見ることができますか？あなたの問題に対する正しい答えを得ることは簡単です。

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

固定幅レイアウトは、デザイナーに柔軟性を提供しますが、訪問者には柔軟性を提供しません。 Xピクセル幅のレイアウトを作成すると、ウェブサイトをピクセルごとに好みに合わせて微調整できますが、<！> quot; float <！> quot;レイアウト（私はリキッドレイアウトと呼びます）は完全にパーセント値に基づいているため、コンピューターごとに異なります。画面上のレイアウトをテストでき、他の人にどのように表示されるかわからないので、私はこれが難しいと思っています。（たとえば、）20pxのマージンは、768pxまたは960pxの固定幅レイアウトに比べてより多くの効果があります1280px液体のコンピューター画面。

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

すべては、視聴者とサイトがどのように適合するかによって異なります。いくつかのレイアウトは流動的で完全に正常に機能しますが、他のレイアウトは修正する必要があります（説明したように）。

背景画像を使用する代わりに、ヘッダー画像（マストヘッド）に <！> lt; img <！> gt; タグを使用しないのはなぜですか？

ヘッダーのグラフィックを拡大縮小しないことをお勧めします。ほとんどのブラウザは画像の拡大縮小がひどく（最も近いものは何ですか？）、多くの人には見栄えがよくありません。

私は自分で流体/フロート/液体のレイアウトに取り組んでいます。実際、ほとんどのサイトでは単一の列を使用しているため、すべての複雑さを心配する必要はありません<！> quot; normal <！> quot;サイトのレイアウトがあります。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top