2012-04-01 6 views
3

ブラウザの幅に基づいて異なるレイアウトを達成する方法を知っている人はいますか?私はGoogleのそれにしようとした Webサイトのレイアウトは、幅が変わると変わりますか?

http://css-tricks.com/

http://sasquatchfestival.com/

は、StackOverflowの質問に目を通すと、そのコードを見て、私は、私は何かが足りないと思います。実際には、ウィンドウの幅に基づいていくつかの要素を並べ替えたりサイズを変更したりしますが、どうしたらよいですか? Javascript?

申し訳ありませんが、私の検索スキルがうまくいかない場合は、何を検索するのか分かりません。ここでの「類似の質問」は関連していないように見え、CSSトリックでも場所を見つけるのは簡単です。

+0

タスクに対してjavascriptおよび/またはメディアクエリを使用できます。 – rcdmk

+0

レスポンシブなウェブデザインをご覧ください。 – SLaks

+0

メディアクエリ、thats called thats!みんな、ありがとう! – miahelf

答えて

5

JSを使用してブラウザの幅を検出する必要はありません。 CSSメディアクエリーを使用してレイアウトを変更することができます。例えば

@media screen and (max-width: 1280px) { 
    ... selector(s) here ... 
} 

は高々1280px幅で画面にCSSを適用します。

も参照してください:

+0

私はサイトを作っていて、メディアクエリを使用し始めましたが、ページがロードされた後に動的に変化するようには見えません。それはどうしたの? –

0

少しでもjMasonryがあるかもしれませんが、Twitter Bootstrapが提供するものと少し似ていますが、静的なCSSバージョンを回答しておく価値があります。

1

CSS3メディアクエリを使用して、画面の幅に基づいてさまざまなスタイルを配信できます。詳細についてはこちらをご覧ください:http://www.css3.info/preview/media-queries/

たとえば、sasquatchfestival.comサイトのCSSソースを見ると、彼らは何をしているのかを見ることができます:http://sasquatchfestival.com/css/screen.css?v=1328828795。 「@media only screen」を検索すると、幅が768px未満、768-1024px、1024pxを超える異なるCSSを配信していることがわかります。

1

あなたが利用可能な多くの応答性のフレームワークの1つを使用してWebサイトを再構築/車輪の再発明か、単に構築することができます。私は 'Skeleton'と 'Bootstrap by Twitter'の両方を使っています。そのフレームワークは次の場所にあります。
スケルトン... [http://www.getskeleton.com/][1] ブートストラップ... [http ://twitter.github.com/bootstrap/] [2]

私はそれぞれを使ってサイトを構築しました... スケルトン... [http://72t.net] [3] ブートストラップ... [http://ReactiveWebDesign.net] [4]

私はまだ好きなものを決めようとしていますが、今はブートストラップがより多くの機能を提供するようです。

関連する問題