ウィンドウサイズに応じて動的にウェブページのレイアウトのサイズを変更するにはどうすればよいですか？

Question

私は比較的新しいWeb開発に取り組んでいます。私は開発中のページをレイアウトを歪ませずにウィンドウサイズに動的にサイズ変更する簡単な解決策を手元に知っていますか？ページを中心にしてみたいと思っていますが、問題は中心に置いてみましたが、ウィンドウのサイズを変更すると、ページ上の要素が動かなくなりました。どんな助けもありがとうございます。

私は先に進み、サーバーにコードを載せて、簡単に閲覧できるようにしました。これは主にテストのために行いました。プロジェクトは任意であり、最終的には語学教育ツールの一部として使用されます。レイアウトを歪ませずに動的にサイズを変更できるように、レイアウトを取得しようとしています。

現在の設定では、レイアウトが画面内に適切に収まるように画面の解像度が低い場合、手動でズームアウトする必要があります。

現在、CSSで絶対位置指定を使用してページ要素を背景イメージに相対的に配置していますが、背景パターンに合わせて適切に配置する必要があります。

ページを表示するには、http://www.kapacitive.com/Main_Page_Template.htmlでコードを表示するためにページソースを表示する必要があります。

もう一度お手数をおかけしますが、何か助けてもらえない場合は、ただ応答しないでください。ありがとう。

Answer 1

体に幅を削除し、あなたのメインナビゲーションキューブにこれらのスタイルを設定します。

#mainNavCubes { 
    position: absolute; 
    left: 50%; 
    top: 170px; 
    margin-left: -240px; 
} 

これは、画面の真ん中に自分の位置を設定し、負のマージンを持って、あなたは左にプッシュすることができます。

Answer 2

ややダイナミックなレイアウトを実現するには、CSS3メディアクエリを使用することができます。

@media (max-width: 800px) { 
    foo { 
    ... 
    } 
} 

@media (max-width: 500px) { 
    foo { 
    ... 
    } 
} 

彼らは、特定の画面サイズをターゲットにしています。両方のウィンドウとビューポートのサイズを測定するための
https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
非常に便利：

Answer 3

私は、FirefoxやChrome
リンク以下 チェックのいずれかのWeb開発者向けの拡張機能を見つけました。また、いくつかのデフォルトサイズに従ってウィンドウサイズを設定することもできます。

（それは同様に他の有用なウェブ開発ツールの全体の負荷を持っています。）