ページのサイズが変更されたとき、それを美しく順番に再配置するにはどうすればいいですか？

Question

たとえば、www.breakingnews.comはTwitter Bootstrapを使用しています。これは、このような再配置ではすばらしい仕事です。ブラウザウィンドウのサイズが水平方向に変更されると、ページはそれに応じて調整されます。列サイズの縮小、列とヘッダーの消失、アイコンとボタンの脇への移動、テキストの再配置が行われます。これはどのように作動しますか？

Answer 1

この特定のケースでは、CSSメディアクエリが使用されています。これにより、デバイスの幅に応じて異なるスタイルシートを使用することができます。つまり、幅に応じて異なる列を表示する小さな、中、大のスタイルシートがあります。 This tutorial covers media queries.

これに加えて、要素の幅は％で指定する必要があります。これは流体レイアウトと呼ばれます。これにより、現在のブラウザサイズに関連したものになります。固定幅のレイアウトは、ブラウザのサイズに関係なく同じ幅であるため、ブラウザのサイズを変更するとコンテンツが単に切り取られます。

Answer 2

これを実行する方法はたくさんあります。彼らは、CSS3と@medaの画面と（max-wdith：x）を使って値を設定しています。そのall.cssファイル内

@media screen and (max-width: 1024px) { 
    #identity { 
    margin-left:6.15%; 
    } 
} 

：

だから、彼らのようなコードを持っています。

Answer 3

これは、一般的に「Responsive Design」と呼ばれる技術です。これは、技術的な実装が非常に簡単で、可変画面サイズの設計方法です。リンクされた本は、短くて簡単な説明です。