CSS 获取屏幕分辨率的高度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11516291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:30:41  来源:igfitidea点击:

CSS get height of screen resolution

css

提问by FishBowlGuy

I'm having a hard time getting the height of lower screen resolution because my screen resolution is 1920x1080.

我很难获得较低屏幕分辨率的高度,因为我的屏幕分辨率是 1920x1080。

Does anyone know how to get height and width of the screen resolution?

有谁知道如何获得屏幕分辨率的高度和宽度?

I checked my work on a 1024x768 resolution and it is rendered all messed up.

我以 1024x768 的分辨率检查了我的工作,结果全都搞砸了。

采纳答案by Starx

It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queriesto 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)" />

回答by Hendrik Eichler

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 Networkand W3C.

更多信息也可通过Mozilla 开发者网络W3C 获得

回答by Kailas

Adding to @Hendrik Eichler Answer, the n vhuses n%of the viewport's initial containing block.

添加到@Hendrik艾希勒应答时,n vh使用n%视口的初始包含块。

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

Also, the viewport height is for devices of any resolution, the view port height, width is one of the best ways (similar to css design using % values but basing it on the device's view port height and width)

此外,视口高度适用于任何分辨率的设备,视口高度、宽度是最好的方法之一(类似于使用 % 值的 css 设计,但基于设备的视口高度和宽度)

vh
Equal to 1% of the height of the viewport's initial containing block.

vw
Equal to 1% of the width of the viewport's initial containing block.

vi
Equal to 1% of the size of the initial containing block, in the direction of the root element's inline axis.

vb
Equal to 1% of the size of the initial containing block, in the direction of the root element's block axis.

vmin
Equal to the smaller of vw and vh.

vmax
Equal to the larger of vw and vh.

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

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

vi
等于初始包含块大小的 1%,在根元素的行内轴的方向上。

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

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

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

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

参考:https: //developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

回答by Apex ND

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.

这将呈现一个 div,其高度为内部浏览器的 50%,宽度为 25%。

(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 想说的一部分,但他只提供了一个链接,并没有直接解决问题)

回答by Devin G Rhode

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

您可以将屏幕的当前高度和宽度绑定到 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)
})

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

回答by isacvale

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.

您可以在纯 CSS 中使用单位“vh”很容易地获得窗口高度,每个单位对应于窗口高度的 1%。在下面的示例中,让我们开始通过添加一个屏幕大小的一半的 margin-top 来集中 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”单位更通用?因为你可以得到任何元素的高度。现在,如果您想将 block.foo 集中在任何 container.bar 中,您可以:

$(':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 );
});

回答by Yuseferi

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

为了获得屏幕分辨率,您还可以使用jquery。这个链接对你解决非常有帮助。

回答by Guilherme de Jesus Santos

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

要获得屏幕分辨率,应使用 Javascript 而不是 CSS:screen.height用于高度和screen.width宽度。

回答by Ashish Kumar

Use height and width in percentage.

使用百分比的高度和宽度。

For example:

例如:

width: 80%;
height: 80%;