【发布时间】：2012-07-16 00:11:32
【问题描述】：
因为我的屏幕分辨率是 1920x1080，所以我很难获得较低屏幕分辨率的高度。
有谁知道如何获取屏幕分辨率的高度和宽度？
我在 1024x768 分辨率下检查了我的作品，但它被渲染得一团糟。
【问题讨论】：
-
前几天我也在寻找同样的东西，偶然发现了这篇有趣的文学作品：mislav.uniqpath.com/2010/04/targeted-css
标签： css
【发布时间】：2012-07-16 00:11:32
【问题描述】：
无法从 CSS 中获取屏幕高度。但是，使用 CSS3 以后，您可以使用 media queries 来控制模板的显示分辨率。
如果您想使用媒体查询根据高度进行编码，您可以定义样式表并像这样调用它。
<link rel="stylesheet" media="screen and (device-height: 600px)" />
【讨论】：
使用百分比的高度和宽度。
例如：
width: 80%;
height: 80%;
【讨论】：
-
百分比仅适用于父元素的最大高度/宽度。
您可以使用视口百分比长度。
见：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 获得。
【讨论】：
-
这种方法的唯一问题是移动设备中的 vh 计算时包括地址栏，这使得对于固定的全高元素很难依靠它。
-
不幸的是，“vh”不是屏幕高度，而是视口高度（因此是缩写）。如果浏览器窗口没有最大化，你没有得到屏幕高度，你得到的是窗口视口高度。
要获得屏幕分辨率，您需要使用 Javascript 而不是 CSS：
使用screen.height 作为高度，使用screen.width 作为宽度。
【讨论】：
您实际上不需要屏幕分辨率，您需要的是浏览器的尺寸，因为在许多情况下浏览器是窗口化的，即使在最大化尺寸时浏览器也不会占据 100% 的屏幕。
你想要的是 View-port-height 和 View-port-width:
<div style="height: 50vh;width: 25vw"></div>
这将呈现一个 div，其高度为内部浏览器的 50%，宽度为 25%。
（说实话，这个答案是@Hendrik_Eichler 想说的一部分，但他只给出了一个链接，并没有直接解决这个问题）
【讨论】：
您可以将屏幕的当前高度和宽度绑定到 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
【讨论】：
您可以在纯 CSS 中很容易地获得窗口高度，使用单位“vh”，每个对应于窗口高度的 1%。在下面的示例中，让我们开始通过添加一个屏幕大小的上半边距来集中 block.foo。
.foo{
margin-top: 50vh;
}
但这仅适用于“窗口”大小。使用一点 javascript，您可以使其更加通用。
$(':root').css("--windowHeight", $( window ).height() );
该代码将创建一个名为“--windowHeight”的 CSS 变量，该变量带有窗口的高度。要使用它，只需添加规则：
.foo{
margin-top: calc( var(--windowHeight) / 2 );
}
为什么它比简单地使用“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);
}
最后，为了响应窗口大小的变化，您可以使用（在本例中，容器是窗口高度的 50%）：
$( window ).resize(function() {
$(':root').css("--containerHeight", $( .bar ).height()*0.5 );
});
【讨论】：
-
我的用例不同，但想法很棒
添加到@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
【讨论】：
-
谢谢，这对我来说是迄今为止最简单的解决方案。