メディアのクエリを使用して固定幅のウェブサイトを反応させることはできますか？

Question

私はウェブサイトを持っています。固定幅です。私はそれを流動的にしなければ反応的なものにするためのチュートリアルを探しています。出来ますか？現在のHTMLファイルに多くの変更を加えることなく（多くの場合）、CSSを変更することによって、モバイル/タブ/タッチデバイス互換のウェブサイトを作成するには、メディアクエリを使用できますか？

Answer 1

既に良い解決策が見つかったかどうかは分かりませんが、何かを追加したいと思います。

960グリッドシステムに精通している場合は、skeleton gridが好きになると思います。 960グリッドシステムは、960ピクセル幅に固定された通常のCSSフレームワークです。スケルトングリッドはこれに対して2つの固定状態を広告します。

IMOは、固定状態であり、流体の変更ではなくブラウザのサイズ変更時にポップするということです。

また、私はレスポンシブなデザインで多くの作業をしています。私は流体グリッドが醜いと感じています。私は固定された状態が好きです。私はそれがはるかにクリーンで、扱いやすいと思います。

-

私自身は組み合わせである私自身のグリッドで動作します。これは960ピクセルのベースを持ち、これはメディアクエストをサポートしていない中規模のスクリーンとブラウザ用です。

大画面の場合は、1140pxという大きな状態でこれを拡張します。その後、デフォルトの状態は960pxです。その後、768px、次に480px、最後に320pxの状態になります。

これは5つの状態を作成し、状態4はデフォルトの状態です。それは素晴らしい作品です、私はすべての私のプロジェクトに使用する空白のWordPressのテーマにそれを焼いています。