css - 可以使用 CSS 从 jquery 移动网格 B 移动到网格 A

Question

我正在使用 documentation 中概述的网格 B .我想知道是否可以在不使用 javascript/jquery 的情况下使用 css 媒体查询从网格 B 更改为网格 A？

Answer 1

根据您的需要，我在 device-width 上将 Grid B 布局设置为与 Grid A 相同，介于 500px 和900 像素。当布局进入该区域时，“Block A”和“Block B”将占据整个网格空间的一半。 Block C 将占据 Grid 的整个宽度并自动下降。

@media screen and (min-width: 500px) and (max-width: 900px) {
    .ui-grid-b.ui-responsive .ui-block-c {
        width: 100%;
    }
    .ui-grid-b.ui-responsive .ui-block-a,
    .ui-grid-b.ui-responsive .ui-block-b {
        width: 50%;
    }
}

FIDDLE 这里

希望您明白了!