ワイドスクリーンから小型スクリーンへのCssの劣化（液体）レイアウト

Question

私が取り組んでいるサイトのCSSレイアウトにはまっています。これはレポートツールであり、ワイドスクリーンモニターとネットブックの両方で使用されます。このサイトは、（非常に）ワイドスクリーンフォーマットから狭い（ネットブック）フォーマットにうまく縮退するスタイルシートを除いて行われます。

これは、それがワイド画面に表示する方法です。 http://s1.postimage.org/1d67kaxdw/pageverywide.png

と狭い画面用： http://s1.postimage.org/1d65wrkw4/pagenarrow.png

私はそれが狭いPICに正しいものに分解したいのですが、私は左の人がもっとやることができると思う。

私は画面サイズに応じて条件付きCSSロードを行うことができますが、ただ1つのスタイルシートにしたいと思います。問題の核心は、右（グラフ）のコンテンツを縦にし、中央に表示するスペースがない場合は幅が広い場合はページの一部、中央に、横にある場合は横になるようにすることです。縦スクロールは大丈夫です。赤い側面を持つテーブルは、ダイナミックな高さであり、これもまた問題であった。

私は、上記のように右のグラフデータを中央に配置するレイアウトを持っていますが、それを垂直から水平に、またはその逆にする方法を考え出すことはできません。これを達成するためにどのように単一のCSSシートを使用できますか？

Answer 1

私は、画面サイズに応じて条件付きCSSの負荷 を行うことができます知っているが、私は はそれだけで1つの のスタイルシートになりたいです。

あなたができることは、CSS3の新機能であるmedia queriesです。彼らは、画面サイズ、1ファイル、およびjavascriptに依存する特定のルールのセットを特定することができます。ここ

これは平均的なページであろう例

@media screen and (max-width: 600px) { 
    .graphs{ 
     /* change position */ 
    } 
}