CSS获取屏幕分辨率高度

Question

因为我的屏幕分辨率是1920x1080，所以我很难获取低分辨率下的高度。

有人知道如何获取屏幕分辨率的高度和宽度吗？

我在1024x768分辨率上检查了我的工作，结果呈现混乱不堪。

- FishBowlGuy

---

请查看媒体查询 http://www.w3.org/TR/css3-mediaqueries/ - Musa

我前些天也在寻找同样的东西，然后偶然发现了这篇有趣的文章： http://mislav.uniqpath.com/2010/04/targeted-css/ - Jules

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 开发者网络 和 W3C 查看更多信息。

- Hendrik Eichler

---

这种方法的唯一问题是移动设备中vh的计算包括地址栏，这使得它难以用于固定全高元素。 - Roshdy

很不幸，“vh”并不代表屏幕高度，而是视口高度（因此缩写为“vh”）。如果浏览器窗口没有被最大化，你得到的不是屏幕高度，而是窗口视口高度。 - yodabar

Answer 2

在 @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/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

- Kailas

---

谢谢，这对我来说是迄今为止最简单的解决方案。 - punjabi4life

VH 对我很有用。将其设置为75适合所有尺寸，对于较小的尺寸略大一些，这对我的需求来说很好。感谢所有发布 VH 和 VW 的人。 - Wayne Barron

Answer 3

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

您需要的是视口高度和视口宽度：

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

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

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

- Apex ND

Answer 4

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

如果您想使用媒体查询基于屏幕高度编写代码，可以定义样式表并像这样调用它。

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

- Starx

Answer 5

您可以使用以下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)
})

这是直接来自 Lea Verou 在她关于 CSS 变量的演讲中的示例，网址在这里：https://leaverou.github.io/css-variables/#slide31

- Devin Rhode

Answer 6

您可以很容易地在纯CSS中获取窗口高度，使用“vh”单位，每个单位对应窗口高度的1％。 在下面的示例中，让我们通过添加占屏幕大小一半的margin-top来将block.foo居中。

.foo{
    margin-top: 50vh;
}

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

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

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

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

它比仅使用“vh”单位更加通用的原因是什么？因为您可以获取任何元素的高度。现在，如果您想要在任何容器.bar中将块.foo居中，您可以执行以下操作：

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

- isacvale

---

我的使用情况不同，但这个想法很棒。 - dotnetCarpenter

Answer 7

我遇到了这个问题，但是使用一些JavaScript解决了：

var s = document.createElement("style");
document.body.append(s);
window.onresize = function() {
    s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";
}
s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";

完整示例：

var s = document.createElement("style");
document.body.append(s);
window.onresize = function() {
  s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";
}
s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";

.window-size {
  width: var(--win-width);
  height: var(--win-height);
  background: #00f;
}

<div class="window-size">This will always be this size of the window.</div>
<p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p>

- noname

Answer 8

为了获取屏幕分辨率，您也可以使用jquery。这个link会对您有很大帮助。

- Yuseferi

Answer 9

要获取屏幕分辨率，您需要使用JavaScript而不是CSS： 使用screen.height获取高度和screen.width获取宽度。

- Guilherme de Jesus Santos

Answer 10

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

例如：

width: 80%;
height: 80%;

- Ashish Kumar

---

百分比仅适用于父元素的最大高度/宽度。 - BladeMight

仅适用于父元素。 - Code with Benji