jquery - 「フルスクリーン」のサイトで3つの垂直要素を均等に分割していますが、中央の要素を「優勢」にするにはどうすればよいですか？

Question

画面が最小化されたら、中央の要素がすべてのビューポートスペースを占めるようにし、途中までドラッグします。（どちらの側の2つの要素も美的です）CSSまたはJqueryでこれを実現できる属性はありますか？

Answer 1

メディアクエリを使用します。ここで答えを参照してください。古いブラウザをサポートする必要がある場合は、JavaScriptフォールバックを提供できます（Googleを参照）。

Answer 2

このようなものはどうですか（メディアクエリを使用してブラウザウィンドウの幅を検出します）：

#leftBox, #centerBox, #rightBox{
    width:33%; 
    float:left; 
    background:#fccbae; 
    border:1px solid red;
    min-height:500px;
    height:auto;
}

/* Smaller than standard 960 */
@media only screen and (max-width: 979px) {

    #centerBox{width:100%;}
    #leftBox, #rightBox{display:none;}

}

<div id="leftBox"></div>
<div id="centerBox"></div>
<div id="rightBox"></div>