如何使div 10%的设备屏幕高度css

Question

我正在寻找的是jQuery的CSS等价物 $("div").css({"height":screen.height/10})

我听说过CSS媒体查询,我喜欢它们,但我不知道有什么东西甚至可以做到甚至接近它.我知道如何使用min-height查询:

@media (min-height: ... /* some height */){
    div{
        height: ... /* 'some height' divided by ten */
    }
}

但它只有10%的浏览器窗口高度(不是我正在寻找的!).

而且我不能简单地使用height: 10%因为div嵌套在另一个具有设置高度(以像素为单位)的元素中.

我也无法使用,height: 10vh因为视口的高度根本不是设备屏幕的高度(在Chrome和IE中测试;如果你想要校样,请调整窗口大小.你会发现高度随着窗口高度的变化而变化)

注意:

我要求div是设备屏幕的10%,这意味着如果计算机的显示器(设备屏幕)的分辨率为1280像素×800像素,那么div应该是800px的10%,即80px.此外,如果窗口调整大小,div的高度不应更改,因为即使窗口正在调整大小,也无法调整物理计算机显示器或电话屏幕的大小

Answer 1

它并不完全清楚你指的是什么,但有一个CSS属性.

这是垂直高度单位(vh)

每个vh等于屏幕/视口垂直高度的1%.

的jsfiddle

CSS

div {
    background: red;
    height:10vh;
}

CanIUse参考

MDN参考

Answer 2

您可以使用min-device-height而不是min-height:

@media (min-device-height: ... /* some height of the screen*/){
    div{
        height: ... /* 'some height' divided by ten */
    }
}

这也适用于其他维度查询,例如:

min-width - > min-device-width

height - > device-height

width - > device-width

有关更多信息,请访问Mozilla的CSS查询指南.