Fluid Layout を使用するのは賢明でしょうか?

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

  •  21-09-2019
  •  | 
  •  

質問

Google Labs ブラウザのサイズ

私は常に流動幅レイアウトよりも固定幅レイアウトを好みます。主な理由の 1 つは、画面解像度を気にすることなく全体像がどのようになるかをよりよく理解できるためです。

でも今はその「イメージ」が変わってきて、 現在、ほとんどのユーザーが使用している最低解像度と最高解像度の間には大きな差があります そして彼らはここに留まり続けるようです。

800 ピクセルのみをサポートするネットブックを使用しているか、 1024ピクセル 広い;をサポートする22インチモニターもあります。 1650ピクセル および、サポートする 24 インチ モニター 1920ピクセル などはかなり一般的になってきています。

私はしばらくの間、800 ピクセルのユーザーをほぼ「無視」し、固定幅 950/960 ピクセルで開発してきました。人気のサイト (それで 1 つ目は、このアプローチまたは流動的なアプローチを使用することです。

テキスト（ほぼ）のみのウェブサイト（ ウィキペディア) 流体システムの使用に問題はないと思いますが、他のものはどうですか 興味深いコンテンツを作成するために画像やビデオに依存する Web サイト?ソーシャルネットワーク、広告など...この問題に対処するための彼らのアプローチは何ですか?

シームカービング 近い将来には良い選択肢のように思えますが、まだ十分に成熟していません (現時点ではブラウザも jQuery もネイティブにサポートしていません)。また、ユーザーはそれを理解せず、混乱し、その結果として混乱してしまうのではないかとも感じます。ウェブサイトを放棄します。

の デファクト Web の標準幅は依然として 1024 ピクセルのままです。 980ピクセルは未使用 24 インチのモニターで見るのは、間違いとは言わないまでも明らかに奇妙に思えます。 では、私たちの選択肢は何でしょうか？

screen resolutions with fixed layout

これについてのご意見と、流体システムと固定システムの両方に関するご経験をぜひお聞かせください。

追伸：これらのシステムのいずれかを使用する人気のある Web サイトも歓迎します。私は特に流体システムを使用する非テキスト Web サイトに興味があります。

編集：今見た この答え 流体レイアウトと液体レイアウトの違いについて少し混乱しましたが、それらはまったく同じであるはずではありませんか?

役に立ちましたか？

解決

私は一般的に流体のレイアウトは良いアイデアだと思います。あなたの流体レイアウトは、高解像度の画面で、本当に広い取得するために開始したときに問題が始まる - 人間の目は垂直方向の位置を失うことなく水平に追跡することができますどのくらいには限界があります。新聞のコラムは、例えば、常にかなり狭いです理由です。

は、高解像度の画面でウィキペディアを見てみてください、あなたは彼らが800-900px周りの何かに最大幅を制限していることがわかります - より多く、その後の人々が読むことができることを停止すること（むしろ標準12ptのフォントを想定）と行の最後まで、その後、難なく目と首の歪みの混乱の中に次の行の先頭、および全部の区切りを見つけます。

私が構築したウェブサイトで、私は、テキストコンテンツの最大幅を制限するために、最大幅を使用する（とで私はまた、画像や他のもの含まれていること）サイドバーと、このような缶で多分に着く720-800px程度にし、周り1000px。画面が広いこと、その後であれば、どちらかそれ（RTLのウェブサイト上で右ALIGN）左揃えの内容を中心に - 仕事の両方をうまく

。 しかし、あなたが利用できる幅が狭い場合には流れるようにレイアウトを設計する必要があります - これはネットブックを持つ人々のために非常に有用である（現在はかなり普及していると私は将来的に普及することを期待）、スマートフォンや小さな画面のモバイルデバイス。携帯電話のブラウザは何とかあなたのウェブサイトを減らすことができたとしても、「モバイルモード」は、通常のページをめちゃくちゃにして、意図されたユーザエクスペリエンスを殺すことでこれを行います - 。より多くの機能を標準のブラウザや、あなたのデザインでこれに対処する必要があり、このようなモバイルデバイス

他のヒント

  

24" モニターで使用されていない980個のピクセルを残すだけで、

間違っていると言うことではないプレーンな奇妙に思えます

私はここに反対するだろう。あなたは、高Aの解像度のモニターを持っている場合は、おそらく最大化ブラウザのウィンドウで実行していません。あなたがある場合でも、あなたが本当に内容が途中で固定区域内のすべてだとfussedていますか？本当に？

あなたのサイトには、まともな、使用可能なレイアウトを持っている限り、私は高解像度のモニター上の空間のいずれかの側に問題が表示されません。

A stylesheet- W3Cの内部の異なる@mediaルールを作成する方法があり、この上で何かを持っています - そしてそれはハンドヘルドのブラウザは規則に従うかどうかは大きなシュレーディンガーの猫だが、それは彼らが、彼らは単にスケールモデルを使用するために十分に大きいとよくレシオスクリーンを持っていない場合でも、それを想定して、かなり安全ですそれは、デスクトップに表示されるサイトのます。

は、それが5〜10年でこのようなデバイスの登場に先行ウェブサイトと互換性を持たせるためのデバイスのメーカーの最善の利益にあったように私には思えます。

そうでない場合、それは彼らの問題だ。

私はこの問題を異なる角度になります。ての流体のレイアウトもで最小幅は最大幅).で表現できること。

この画像ではありません。いは次の通りです：

  1. アップロード画像での最大サイズに期待しています。

  2. イメージを流体として

    <img src="http://example.png" style="width:32.5%">

してリサイズのページの画像の再サイズ自体の比率の幅になります。だいさんがいない幅または高された属性のイメージです。黒ざくろさん、難しい話でsuperlastic:)

流体のレイアウトに答える前に 対応デザイン 支援のブラウザをしています。を使用する必要がなく、流体や弾性のレイアウトです。

どの2つの設計目標は、今までに同じものはありませんとして

は、この質問に対する正しい答えはありません。流体レイアウトはタイポグラフィックコントロールのいずれかのうわべだけは事実上不可能ではなく、すべてのデザインは、それを必要としたりします。

「ベストプラクティス」史上実際のデザイン教育と同等になり、すべてのユーザーが、画面全体を埋めるために彼らのブラウザウィンドウを爆破することを強制感じることはありませんの集まりませんどちらか。

私がこれまでに読んだレイアウトに関する最も有益な議論は、Andy Budd の CSS Mastery 本にあります。機会があればぜひ読んでみてください。CSS（中級者向け）に関しては必携の本だと思います。レイアウトの章はここで記事形式で利用できるようです。http://www.webreference.com/authoring/style/sheets/css_mastery2/

別のリンク:http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

液体と流体は、同じテクニックの 2 つの異なる名前です。

HTH。

私はそれがレイアウトの最大幅を持っている方が良いでしょう、あなたはJavascriptでそれを変更することができると思います。 ます。http：その良い例では、幅を変更した場合のレイアウトを持つ（Firebugのか何かで）何が起こるか、このレイアウト、外観です。 //tweakers.net/する 彼らは、1208pxの幅を選択し、ブラウザの幅が変化したときにJavaScriptを使用して、それを小さくしています。 Javascriptが無効にすると、ウェブサイトは、とにかく問題ではないように思われ、まだ広い1208pxです。

編集： ウェブサイトの最初の幅は900pxのようになります。 JavaScriptを使用して、あなたは、ブラウザの幅をチェックすると、あなたのブラウザの幅に最も近い解像度を持つクラスを与えます。たとえば：あなたは、あなたがクラスのres1100」を与えて、クラスのres1024 '、または1080px幅ブラウザを与えるように、ブラウザの幅は、1100pxのようです。 これはあなたのCSSになります：

#wrapper {
    width: 900px;
}
.res1024 #wrapper {
    width: 1000px;
}

.res1100 #wrapper {
    width: 1080px;
}

私はそれがあなたの役に立てば幸います：

：]、あなたがofcourseのように、この体のクラスで、より多くのことを変更することができます 
.res900 #menu {
     width: 100px;
}

EDIT 2： あなたは、画像を同じように扱うことができます：

.res900 img.fluid {
    width: 200px;
}

.res1100 img.fluid {
    width: 300px;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top