我很难获得较低屏幕分辨率的高度，因为我的屏幕分辨率是 1920x1080。
有谁知道如何获得屏幕分辨率的高度和宽度？
我以 1024x768 的分辨率检查了我的作品，结果一切都变得一团糟。
问问题
250614 次
9 回答
222
您可以使用视口百分比长度。
请参阅：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获得。
于 2015-01-09T18:57:23.107 回答
41
添加到@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
于 2019-03-01T12:44:05.460 回答
21
您实际上不需要屏幕分辨率，您想要的是浏览器的尺寸，因为在许多情况下浏览器是窗口化的，即使在最大化尺寸下，浏览器也不会占用 100% 的屏幕。
你想要的是 View-port-height 和 View-port-width：
<div style="height: 50vh;width: 25vw"></div>
这将呈现一个具有内部浏览器高度的 50% 和宽度的 25% 的 div。
（老实说，这个答案是@Hendrik_Eichler 想说的一部分，但他只给出了一个链接，并没有直接解决这个问题）
于 2015-12-29T07:07:06.197 回答
18
无法从 CSS 获取屏幕高度。但是，从 CSS3 开始，您可以使用媒体查询来根据分辨率控制模板的显示。
如果您想使用媒体查询根据高度进行编码，您可以定义样式表并像这样调用它。
<link rel="stylesheet" media="screen and (device-height: 600px)" />
于 2012-07-17T05:14:16.857 回答
10
您可以将屏幕的当前高度和宽度绑定到 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
于 2016-12-27T17:58:04.777 回答
8
你可以很容易地在纯 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 );
});
于 2018-03-01T12:27:58.910 回答
0
要获得屏幕分辨率，您需要使用 Javascript 而不是 CSS：screen.height用于高度和screen.width宽度。
于 2015-01-09T19:16:47.437 回答
-10
使用百分比的高度和宽度。
例如：
width: 80%;
height: 80%;
于 2012-07-17T06:04:18.660 回答