css获得屏幕分辨率的高度

im having a hard time getting the height of lower screen resolution because my screen resolution is 1920x1080 does anyone know how to get the height and width screen resolution? because my friend has 1024x768 resolution when he checked my work into his computer, its all messed up, this is my only problem when it comes to CSS the height and width.

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

8 个解决方案

#1

It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queries to control the display of the template as per the resolution.

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

If you want to code on the basis of height using media queries, you can define style-sheet and call it like this.

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

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

#2

You could use viewport-percentage lenghts.

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

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

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

It works like this:

它的工作原理如下：

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

More info also available through Mozilla Developer Network and W3C.

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

#3

You actually don't need the screen resolution, what you want is the browser's dimensions because in many cases the the browser is windowed, and even in maximized size the browser won't take 100% of the screen.

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

what you want is View-port-height and View-port-width:

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

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

this will render a div with 50% of the inner browser's height and 25% of its width.

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

(to be honest this answer was part of what @Hendrik_Eichler wanted to say, but he only gave a link and didn't address the issue directly)

（老实说，这个答案是@Hendrik_Eichler想要说的一部分，但他只提供了一个链接而没有直接解决这个问题）

#4

You can get the window height quite easily in pure CSS, using the units "vh", each corresponding to 1% of the window height. On the example below, let's begin to centralize block.foo by adding a margin-top half the size of the screen.

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

.foo{
    margin-top: 50vh;
}

But that only works for 'window' size. With a dab of javascript, you could make it more versatile.

但这只适用于'窗口'大小。只需轻轻一点的javascript，你就可以使它变得更加通用。

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

That code will create a CSS variable named "--windowHeight" that carries the height of the window. To use it, just add the rule:

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

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

And why is it more versatile than simply using "vh" units? Because you can get the height of any element. Now if you want to centralize a block.foo in any container.bar, you could:

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

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

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

And finally, for it to respond to changes on the window size, you could use (in this example, the container is 50% the window height):

最后，为了响应窗口大小的变化，你可以使用（在这个例子中，容器是窗口高度的50％）：

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

#5

You can bind the current height and width of the screen to css variables: var(--screen-x) and var(--screen-y) with this javascript:

您可以使用此javascript将屏幕的当前高度和宽度绑定到css变量：var（ - screen-x）和var（ - screen-y）：

var root = document.documentElement;

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

This was directly adapted from lea verou's example in her talk on css variables here: https://leaverou.github.io/css-variables/#slide31

这可以直接改编自lea verou在她关于css变量的讨论中的例子：https：//leaverou.github.io/css-variables/#slide31

#6

In order to get screen resolution you can also use jquery. This link help you very much to resolve.

为了获得屏幕分辨率，您还可以使用jquery。此链接可以帮助您解决问题。

#7

To get the screen resolution use should use Javascript instead of CSS: Use screen.height for height and screen.width for width.

要获得屏幕分辨率，请使用Javascript而不是CSS：使用screen.height表示height，使用screen.width表示宽度。

#8

-7

Use height and width in percentage.

使用高度和宽度百分比。

For example:

例如：

width: 80%;
height: 80%;

#1