10

GoogleLabsのブラウザサイズ

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

しかし、今では「画像」が変更され、現在ほとんどのユーザーが使用している最低解像度と最高解像度の間に大きな差異があり、彼らはここにとどまっているようです。

800ピクセルまたは1024ピクセル幅しかサポートしていないネットブックがあります。また、 1650ピクセルをサポートする22インチのモニターがあり、 1920ピクセル以上をサポートする24インチのモニターがかなり一般的になっています。

私はしばらくの間800ピクセルのユーザーをほとんど「無視」しており、固定の950/960ピクセル幅で開発してきました。また、人気のあるサイト（ 1つはSO）がこのアプローチまたは流動的なアプローチを使用していることにも気付きました。

テキスト（ほとんど）のみのWebサイト（ウィキペディアなど）の場合、流動的なシステムを使用しても問題はありませんが、画像やビデオに依存して興味深いコンテンツを作成する他のすべてのWebサイトについてはどうでしょうか。ソーシャルネットワーク、求人広告など...この問題に対処するための彼らのアプローチは何ですか？

Seam Carvingは近い将来に良いオプションのように見えますが、十分に成熟していません（現時点では、ブラウザーもjQueryもネイティブにサポートしていません）。また、ユーザーはそれを理解できず、混乱し、結果はウェブサイトを放棄します。

ウェブ上のデファクトスタンダードはまだ1024ピクセル幅であり、24インチモニターで980ピクセルを未使用のままにしておくことは、間違いなく奇妙に思えます。では、私たちのオプションは何でしょうか。

固定レイアウトの画面解像度

これについてのあなたの考えと、流体システムと固定システムの両方での経験を聞いてみたいと思います。

PS：これらのシステムのいずれかを使用している人気のあるWebサイトも歓迎します。私は、流動的なシステムを使用している非テキストWebサイトを見ることに特に興味があります。

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

4

8 に答える 8

4

24インチモニターで980ピクセルを未使用のままにしておくのは、間違いなく奇妙に思えます。

私はここで同意しません。その高解像度のモニターを使用している場合は、ブラウザーウィンドウを最大化して実行していない可能性があります。そして、たとえそうだとしても、コンテンツがすべて中央の固定領域にあることに本当に夢中になっていますか？本当に？

あなたのサイトがまともで使いやすいレイアウトである限り、高解像度モニターのどちらの側にもスペースの問題は見られません。

于 2009-12-26T11:02:50.057 に答える
4

一般的に、流動的なレイアウトは良い考えだと思います。問題は、高解像度の画面で流動的なレイアウトが非常に広くなり始めたときに始まります。人間の目が垂直方向の位置を失うことなく水平方向に追跡できる距離には制限があります。そのため、たとえば新聞のコラムは常にかなり狭いです。

ウィキペディアを高解像度の画面で見てみると、最大幅が約800〜900ピクセルに制限されていることがわかります。それ以上（かなり標準的な12ポイントのフォントを想定）、人々は最後まで読むことができなくなります。行の開始を簡単に見つけて、次の行の開始を見つけると、すべてが目と首の緊張の混乱に陥ります。

私が構築するWebサイトでは、max-widthを使用して、テキストコンテンツの最大幅を約720〜800ピクセルに制限しています（サイドバーなどを使用すると、約1000ピクセルになる可能性があります）。画面がそれよりも広い場合は、左揃え（RTL Webサイトでは右揃え）のコンテンツを中央に配置します。どちらも適切に機能します。

ただし、使用可能な幅が狭くなったときに流れるようにレイアウトを設計する必要があります。これは、ネットブック（現在はかなり人気があり、将来的にはもっと人気が出ると思います）、スマートフォン、さらには小さな画面を持っている人にとって非常に便利です。モバイルデバイス。このようなモバイルデバイスはますます標準的なブラウザを備えており、デザインでこれに対処する必要があります。モバイルブラウザが何らかの形でWebサイトを縮小できる場合でも、「モバイルモード」は通常、ページを台無しにして意図したユーザーエクスペリエンスを無効にすることでこれを行います。

于 2009-12-29T08:05:14.573 に答える
2

@mediaスタイルシート内にさまざまなルールを作成する方法があります— W3Cにはこれに関する何かがあります—ハンドヘルドのブラウザがルールに従うかどうかは大きなシュレーディンガーの猫ですが、従わない場合でも、それらが規則に従うと仮定するのはかなり安全です。デスクトップに表示されるサイトの縮尺モデルを使用するのに十分な大きさで比率の高い画面があります。

そのようなデバイスの出現より5〜10年前のWebサイトと互換性を持たせることは、デバイスの製造元の最大の利益であったように私には思えます。

そうでなければ、それは彼らの問題です。

于 2009-12-26T11:00:08.107 に答える
1

私は別の角度から問題に取り組みます。流動的なレイアウトにしますが、（最大幅ではなく）最小幅を指定します。これはCSSで実現できます。

画像の問題はそれほど大きくありません。あなたがすることは次のとおりです。

  1. 予想される最大サイズで画像をアップロードします。

  2. 次のように画像を流動的にします。

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

ページのサイズを変更すると、画像はパーセンテージ幅でサイズ変更されます。画像に幅や高さの属性がないことを確認してください。私はそれを超弾性と呼びます:)

于 2009-12-26T10:32:07.173 に答える
1

ブラウザでのレスポンシブデザインのサポートが発表される前は、流動的なレイアウトがその答えでした。流動的または弾性的なレイアウトを使用する必要はもうありません。

于 2011-10-05T15:34:08.663 に答える
0

2つの設計目標が同じになることはないため、この質問に対する正しい答えはありません。流動的なレイアウトは、活版印刷の制御の類似性を事実上不可能にしますが、すべてのデザインがそれを必要とする、または望んでいるわけではありません。

「ベストプラクティス」のコレクションが実際のデザイン教育に相当することはなく、すべてのユーザーがブラウザウィンドウを爆破して画面全体に表示する必要があると感じるわけでもありません。

于 2009-12-26T10:37:20.073 に答える
0

私がこれまで読んだレイアウトに関する最も有益な議論は、AndyBuddのCSSマスタリーの本にあります。機会があれば読んでください。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/

LiquidとFluidは、同じ手法の2つの異なる名前です。

HTH。

于 2010-01-22T21:06:33.123 に答える
-2

レイアウトの幅は最大にする方が良いと思います。Javascriptで変更できます。その良い例はこのレイアウトです。幅を変更した場合、レイアウトで（Firebugなどで）何が起こるかを見てください。http：//tweakers.net/ 彼らは1208pxの幅を選択し、Javascriptでそれを小さくします。ブラウザの幅が変わります。Javascriptを無効にしても、Webサイトの幅は1208ピクセルのままですが、とにかく問題はないようです。

編集：ウェブサイトの最初の幅は900pxのようになります。Javascriptを使用すると、ブラウザの幅を確認し、ブラウザの幅に最も近い解像度のクラスを指定します。例：ブラウザの幅は1100pxのように見えるので、クラス「res1024」を指定するか、ブラウザの幅を1080pxに設定してから、クラス「res1100」を指定します。これがCSSになります。

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

.res1100 #wrapper {
    width: 1080px;
}

お役に立てば幸いです：]もちろん、このボディクラスを使用すると、次のようにさらに多くの変更を加えることができます。

.res900 #menu {
     width: 100px;
}

編集2：あなたは同じ方法で画像を扱うことができます：

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

.res1100 img.fluid {
    width: 300px;
}
于 2009-12-26T10:20:01.877 に答える