css获得屏幕分辨率的高度

Question

因为我的屏幕分辨率为1920x1080,我很难获得较低屏幕分辨率的高度有没有人知道如何获得高度和宽度的屏幕分辨率？因为我的朋友在将我的工作检查到他的计算机时有1024x768的分辨率,所有这些都搞砸了,这是我唯一的问题,当涉及到CSS的高度和宽度时.

Answer 1

您可以使用视口百分比长度.

请参阅:http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

它的工作原理如下:

.element{
    height: 100vh; /* For 100% screen height */
    width:  100vw; /* For 100% screen width */
}

更多信息也可以通过Mozilla Developer Network和W3C获得.

Answer 2

您实际上不需要屏幕分辨率,您想要的是浏览器的尺寸,因为在许多情况下浏览器是窗口化的,即使在最大化的尺寸下,浏览器也不会占用100%的屏幕.

你想要的是View-port-height和View-port-width:

<div style="height: 50vh;width: 25vw"></div>

这将使内部浏览器高度的50%和宽度的25%呈现div.

(说实话,这个答案是@Hendrik_Eichler想要说的一部分,但他只提供了一个链接而没有直接解决这个问题)

Answer 3

无法从CSS获取屏幕的高度.但是,使用CSS3后,您可以使用媒体查询来根据分辨率控制模板的显示.

如果要使用媒体查询基于高度进行编码,可以定义样式表并像这样调用它.

<link rel="stylesheet" media="screen and (device-height: 600px)" />

Answer 4

在@Hendrik Eichler答案中添加了视口的初始包含块的n vh用法n%。

.element{
    height: 50vh; /* Would mean 50% of Viewport height */
    width:  75vw; /* Would mean 75% of Viewport width*/
}

另外，视口高度适用于任何分辨率的设备，视口高度，宽度是最佳方法之一（类似于使用％值的CSS设计，但基于设备的视口高度和宽度）

vh
等于视口初始包含块的高度的1％。

vw
等于视口初始包含块的宽度的1％。

vi
在根元素的内联轴方向上，等于初始包含块大小的1％。

vb
在根元素的块轴方向上等于初始包含块大小的1％。

vmin
等于vw和vh中的较小者。

vmax
等于vw和vh中的较大者。

参考：https : //developer.mozilla.org/zh-CN/docs/Web/CSS/length#Viewport-percentage_lengths

Answer 5

您可以将屏幕的当前高度和宽度绑定到css变量：，var(--screen-x)并var(--screen-y)使用以下javascript：

var root = document.documentElement;

document.addEventListener('resize', () => {
  root.style.setProperty('--screen-x', window.screenX)
  root.style.setProperty('--screen-y', window.screenY)
})

这是直接根据lea verou在她关于CSS变量的演讲中的示例改编而成：https ://leaverou.github.io/css-variables/#slide31

Answer 6

您可以使用“ vh”单位在纯CSS中轻松获得窗口高度，每个单位对应于窗口高度的1％。在下面的示例中，让我们开始通过将屏幕尺寸的一半添加到顶部来集中化block.foo。

.foo{
    margin-top: 50vh;
}

但这仅适用于“窗口”大小。借助JavaScript，您可以使其更加通用。

$(':root').css("--windowHeight", $( window ).height() );

该代码将创建一个名为“ --windowHeight”的CSS变量，该变量带有窗口的高度。要使用它，只需添加规则：

.foo{
    margin-top: calc( var(--windowHeight) / 2 );
}

为何它比仅使用“ vh”单位更具通用性？因为您可以获得任何元素的高度。现在，如果您想将block.foo集中在任何container.bar中，则可以：

$(':root').css("--containerHeight", $( .bar ).height() );
$(':root').css("--blockHeight", $( .foo ).height() );

.foo{
    margin-top: calc( var(--containerHeight) / 2 - var(--blockHeight) / 2);
}

最后，可以使用它来响应窗口大小的变化（在此示例中，容器为窗口高度的50％）：

$( window ).resize(function() {
    $(':root').css("--containerHeight", $( .bar ).height()*0.5 );
});