5

Im working with a graphic designer who constantly wants to make websites larger than the 960 pixels i recommend. I can do a certain amount with liquid layouts but id really love to be able to load different CSS for larger resolutions. I googled it and found the link below, but im worried that I havnt heard more about this. Is this is a reliable method? Im concerned as I would have thought that more people would want to do this.

http://www.ilovecolors.com.ar/detect-screen-size-css-style/ Thanks

4

1 に答える 1

10

簡単に質問に答えるには：いいえ。たとえそうであったとしても、複数のCSSファイルなどを作成するのは非効率的です。解像度に依存するよりも優れた方法があります。

長い答え：960が「ああ、それは2010年だ...」になると、あなたのサイトのいくつが時代遅れに見えるでしょうか？同時に、インターネットを閲覧するすべての人が30インチのCinema Displayを持っているわけでも、デュアルモニターをセットアップしているわけでもありません。私は自分のトラフィックに最適に対応できるように設計しようとしています。

ブラウザのウィンドウ幅や画面幅（モニターの解像度）を検出するのは良いことかもしれませんが、大多数の意見は次のとおりだと思います。対象読者を把握し、そのために設計/構築します。

960グリッドとCSSを構築してから、1024グリッドとCSSを構築する=非効率であり、あまり「将来性」はありません。

サイトのトラフィックを監視していて、訪問者の90％が1つまたは2つ（または3つ）の解像度を使用していることがわかった場合は、そのオーディエンスに適した流動的なレイアウトを作成します。

流動的なレイアウトは、現在市場に出回っているデバイス、解像度、ビューポートサイズ、画面定義（低、中、高）の拡大し続けるアレイに対する、おそらく最高のユニバーサルソリューションです。18か月後は言うまでもありません。

  1. @mediaクエリをチェックアウトして、流動的なレイアウト/デザインに追加します。1つのCSSファイル（3つではない）を変更します。http://www.w3.org/TR/css3-mediaqueries/

    @media screen and（max-width：960px）{h1、h2 {color：＃990000; font-size：1.4em; }}

    @media screen and（max-width：1280px）{h1、h2 {color：＃336699; font-size：1.8em; }}

  2. min- and max- widthsCSS（または同様のロジック）に追加すると、より広い範囲の解像度/ブラウザーサイズを満たすだけでなく、デザインの保存期間を長くすることもできます。また、document.window.width（）関数に依存しません。

あなたの支出に見合う最高の価値を手に入れましょう。流動的なデザイン、@ mediaクエリ、いくつかのギャップを埋めるのに役立つjavascript。最終的には、コードが少なくなり、「将来を見据えた」デザインになり、満足している訪問者の割合が高くなります。

于 2011-03-02T18:16:34.227 に答える