jquery - 我在“全屏”时在我的网站中平均划分了三个垂直元素，我怎样才能让我的中心元素“占主导地位”？

Question

我喜欢中心元素占据所有视口空间，当屏幕最小化时，拖到一半。（两边的两个元素都只是美学）是否有任何属性可以在 CSS 或 Jquery 中实现这一点？

Answer 1

使用媒体查询。在这里查看答案。如果您需要支持旧版浏览器（请参阅 Google），您可以提供 javascript 后备。

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>