因为我的屏幕分辨率是1920x1080,所以我很难获取低分辨率下的高度。
有人知道如何获取屏幕分辨率的高度和宽度吗?
我在1024x768分辨率上检查了我的工作,结果呈现混乱不堪。
因为我的屏幕分辨率是1920x1080,所以我很难获取低分辨率下的高度。
有人知道如何获取屏幕分辨率的高度和宽度吗?
我在1024x768分辨率上检查了我的工作,结果呈现混乱不堪。
您可以使用视口百分比长度。
参见: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 的回答基础上,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
实际上您不需要屏幕分辨率,而是需要浏览器的尺寸,因为在许多情况下,浏览器是窗口化的,即使在最大化尺寸下,浏览器也不会占据屏幕的100%。
您需要的是视口高度和视口宽度:
<div style="height: 50vh;width: 25vw"></div>
这将呈现一个高度为浏览器内部高度50%,宽度为其25%的div。
(说实话,这个答案是@Hendrik_Eichler想要表达的一部分,但他只提供了链接,并没有直接解释问题)
无法从CSS获取屏幕高度。但是,使用CSS3,您可以使用媒体查询根据分辨率控制模板的显示。
如果您想使用媒体查询基于屏幕高度编写代码,可以定义样式表并像这样调用它。
<link rel="stylesheet" media="screen and (device-height: 600px)" />
您可以使用以下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
您可以很容易地在纯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 );
});
我遇到了这个问题,但是使用一些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>
screen.height
获取高度和screen.width
获取宽度。使用百分比的高度和宽度。
例如:
width: 80%;
height: 80%;