CSS 获得屏幕分辨率的高度

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

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

我在1024x768分辨率上检查了我的工作，它被渲染得一团糟。

285339 次浏览
小开

为了获得屏幕分辨率，你也可以使用 。 这个 链接非常有助于你解决。

小开
最佳答案

不可能从 CSS 获得屏幕的高度。但是，从 CSS3开始，您可以使用 媒体查询来控制模板按照分辨率的显示。

如果希望使用媒体查询根据高度编写代码，可以定义样式表并像这样调用它。

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

以百分比表示高度和宽度。

例如:

width: 80%;
height: 80%;
小开

您可以使用 viewport 百分比长度。

见: 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。

小开

为了获得屏幕分辨率，你需要使用 Javascript 代替 CSS: 高度使用 screen.height，宽度使用 screen.width。

小开

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

您需要的是 View-port-height 和 View-port-width:

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

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

(老实说，这个回答是@Hendrik _ Eichler 想说的部分内容，但他只提供了一个链接，并没有直接解决这个问题)

小开

你可以用这个 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

小开

使用单位“ vh”，可以很容易地用纯 CSS 获得窗口高度，每个单位相当于窗口高度的1% 。在下面的示例中，让我们通过添加一个只有屏幕一半大小的边距顶部来集中 lock.foo。

.foo{
margin-top: 50vh;
}

但是这只适用于“窗口”大小，只需要一点 javascript，你就可以让它变得更加通用。

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

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

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

为什么它比简单地使用“ vh”单元更加通用呢？因为你可以得到任何元素的高度。现在，如果你想在任何一个容器条中集中一个 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 Answer，n vh使用 viewport 的初始包含块的 n%。

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

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

VH
等于 viewport 的初始包含块高度的1% 。 < br > < br > 大众
等于 viewport 的初始包含块宽度的1% 。 < br > < br > Vi
等于初始包含块大小的1% ，在根元素的行内轴方向。 < br > < br > Vb
在根元素的块轴方向上，等于初始包含块大小的1% 。 < br > < br > Vmin
等于 vw 和 vh 的较小值。 < br > < br > Vmax
等于 vw 和 vh 的较大值。

参考: Https://developer.mozilla.org/en-us/docs/web/css/length#viewport-percentage_lengths

小开

我遇到过这个问题，但是使用一些 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>


提交答案