Question

我正在寻找的是jQuery＆＃39; s $("div").css({"height":screen.height/10})

的CSS等价物

我听说过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％，这意味着如果计算机的显示器（设备屏幕）的分辨率为1280px×800px，则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 - ＆gt; min-device-width

height - ＆gt; device-height

width - ＆gt; device-width

更多访问Mozilla's guide for CSS queries。

Answer 3

使用window.innerHeight：

document.getElementById([DIV ID]).style.height = (window.innerHeight / 10); // Gets window height.
window.onresize = function() { document.getElementById([DIV ID]).style.height = (window.innerHeight / 10);

请参见此处： https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight

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

3 个答案: