可以为成对设置相同的高度,但仅限浏览器宽度为960或更宽？

Question

我正在一个响应式网站上工作,我发现我有一对div,其高度我想要相等,但只有当浏览器宽度等于或大于960px时.任何小于那个和div堆叠如此不同的高度没有任何区别.

DIV 1 | DIV 2
DIV 3 | DIV 4
DIV 5 | DIV 6
DIV 7 | DIV 8

基于上述设置,Div 1和Div 2需要与Div 3和Div 4一样高,但两对不需要彼此相等.即,对组可以具有不同的高度,但每对必须相等.

这是可能的,如果是这样,最好的方法是什么？我的javascript/jQuery相当基础.我确信我可以单独做到相同的高度,但是对于这些配对我不确定,然后添加需要将此设置为仅在浏览器为960或更宽并且我丢失时才会发生.

Answer 1

要定位浏览器宽度,请使用CSS3媒体查询.有几种方法可以做到这一点......

在您现有的CSS文件中:

@media only screen and (min-device-width: 960px) {
/* css rules for those divs go here */
}

或者,设置一个新的样式表并像这样调用它:

<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 960px)" href="big-screen.css" />

但我认为诀窍是已经在这些div上设置了一个类,以便您可以使用CSS和jQuery的组合来定位它们.如果它是静态代码,那应该很容易.如果它是动态生成的,则取决于输出.