css - メディアクエリなしでウェブサイトをレスポンシブにする方法はありますか

Question

私はブログを持っています：クリエイティブなブログのヒント。応答性を高めようとしていますが、複雑すぎて操作できないため、media queries非常に時間がかかります。

ウェブサイトをレスポンシブにする簡単な方法を探しています。使用せずにウェブサイトをレスポンシブにする方法はありますmedia queriesか？

Answer 1

パーセンテージ幅、最大幅、最小幅、および同様のcssコマンドがまだあります。

Answer 2

メディアクエリなしでそれを行う唯一の方法は、Javascriptを使用することだと思います。

「javascriptレスポンシブレイアウト」でグーグル検索すると、メディアクエリの処理が不要に見えるResponseJSが見つかりました。

また、レスポンシブレイアウトを設計するときに作業をはるかに簡単にする、Columnalや1140などのCSSフレームワークを探すことをお勧めします。

Answer 3

Javascriptのonresizeとonloadを使用して、ドキュメントの幅を確認し、それに応じてbody要素（または他の要素）のクラスを変更できます。

メディアクエリはエラーが発生しにくいと思いますが、クエリ構文が面倒で時間がかかることについては正しいと思います。

Answer 4

もちろん、メディアクエリなしでWebサイトをレスポンシブにすることができます。

それだけでなく、メディアクエリの使用が少ないほど、Webサイトの保守が容易になります。メディアクエリの使用を減らすようにWebサイトを設計することは、優れた設計目標です。トリッキーかもしれませんが、努力する価値は確かにあります。

css flexを調べることを強くお勧めしますが、フロート、インラインブロック、パーセンテージを使用することもできます。cssに関してはそれほど難しいことではありません。

Answer 5

私は完全に同意します。パーセンテージを使用するだけで達成できることに驚くかもしれません。ただし、ビューポートのサイズを設定することをお勧めします。ビュー <meta name=viewport" content="width=device-width, initial-scale=1"> ポートタグとパーセンテージを使用することから始めるのが最適です。

Answer 6

メディアクエリでない場合は、ブートストラップ、スケルトンなどのフレームワークを使用できます。フラックス、その他のcss、幅と高さ（％）も使用できます。