0

私は自分のページで多くのユニークなグラフィックを使用するのが好きです。その結果、利用可能な画面の幅/高さに応じて異なるページ サイズが作成されることがよくあります。

以下に 2 つの例を示します。

http://www.uvm.edu/~areid/homesite/ - 画像が画面の下部に浮かんでいますが、大きなブラウザでは、画像が中央近くに浮いて見えなくなります。ウィンドウの下部が画像の下部と揃うと最もよく見えます

www.stevenlebel.com - 検出されたモニターのサイズに応じて、2 つの異なるページを読み込みます。

これは、多くの冗長なコーディングのようです。私の質問は、スライス/Photoshop 画像をさまざまな画面サイズにうまく移行させるにはどうすればよいかということです。Photoshop では、テーブルの代わりに DIVS を作成できますか? ブラウザ ウィンドウのサイズが変更されたときに、Photoshop で作成された各スライスを拡大/縮小することはできますか?

このようなウェブサイトの作成について意見をお持ちの方がいらっしゃいましたら、ぜひご意見をお聞かせください。

ありがとう

ケイティ

4

3 に答える 3

3

適切に選択されたブレークポイント、スプライト、個々の画像、さらにはforesight.jsのようなライブラリを使用してメディア クエリを組み合わせることで、探している結果を得ることができます。

メディア クエリを使用すると、ほとんどのタブレット、携帯電話などをカバーするように設定されたブレークポイントを使用して、さまざまな画面グループ用にサイトを設定できます。その後、スプライトから別の画像バージョンを読み込むか、別の画像全体を読み込むことができます。最後に、foresight.js は画面の解像度と利用可能な帯域幅を調べて、必要に応じて Retina ブラウザー用の高解像度の画像を読み込みます。

于 2012-11-04T19:22:22.137 に答える
0

mediaqueri.esのツアーに参加して、他の人があなたの問題をどのように解決したかを調べ、ドリブルも忘れないでください。PC向けのウェブデザインについてはご存知だと思いますが、その他はスマートフォン、タブレット、テレビです。モバイルOS上のアプリのユーザーインターフェイスの基本的な理解を深めます。Androidデザイン、iOS向けアプリデザイン戦略、Windows8向けアプリ向けUXのデザインをお読みください。その後、あなたはあなたの質問を解決するための適切なデザインを持っていると思います。次に、css3メディアクエリについて学び、 html5boilerplateでコーディングを開始し、モバイルデザインから始めます。幸運を！

于 2012-11-10T10:06:46.543 に答える
0

ページサイズを次のように設定します

.page
        { 
        width:100%
        margin-left:auto;
        margin-right:auto;

        }
于 2012-11-05T06:22:57.150 に答える