Question

由于屏幕分辨率为1920x1080，我很难获得较低屏幕分辨率的高度，是否有人知道如何获得高度和宽度的屏幕分辨率？因为我的朋友在将我的工作检查到他的计算机时有1024x768的分辨率，所有这些都搞砸了，这是我在CSS的高度和宽度方面唯一的问题。

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 Developer Network和W3C获取更多信息。

Answer 2

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

你想要的是View-port-height和View-port-width：

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

这将使内部浏览器高度的50％和宽度的25％呈现div。

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

Answer 3

无法从CSS获取屏幕的高度。但是，使用CSS3后，您可以使用media queries按照分辨率控制模板的显示。

如果您想使用媒体查询在高度的基础上进行编码，您可以定义样式表并像这样调用它。

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

Answer 4

除了添加到@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％。

  大众
  等于视口初始包含块宽度的1％。

   vi
  在根元素的内联轴方向上等于初始包含块的1％。

   vb
  在根元素的块轴方向上等于初始包含块的大小的1％。

   vmin
  等于vw和vh中较小的一个。

   vmax
  等于vw和vh中的较大者。

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

Answer 5

使用单位＆＃34; vh＆＃34;可以很容易地在纯CSS中获得窗口高度，每个单位对应于窗口高度的1％。在下面的示例中，让我们通过添加屏幕大小一半的边距来开始集中block.foo。

但这只适用于＆＃39;窗口＆＃39;尺寸。只需轻轻一点的javascript，就可以使它变得更加通用。

. ~/.bashrc

该代码将创建一个名为＆＃34的CSS变量; - windowHeight＆＃34;带有窗户的高度。要使用它，只需添加规则：

.foo{
    margin-top: 50vh;
}

为什么它比单纯使用＆＃34; vh＆＃34;更通用？单位？因为你可以获得任何元素的高度。现在，如果你想在任何container.bar中集中block.foo，你可以：

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

最后，为了响应窗口大小的变化，你可以使用（在这个例子中，容器是窗口高度的50％）：

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

Answer 6

您可以使用此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

Answer 7

要获得屏幕分辨率，您还可以使用jquery。这个link可以帮助您解决问题。

Answer 8

要获得屏幕分辨率，请使用Javascript而不是CSS：使用screen.height表示高度，screen.width表示宽度。

Answer 9

以百分比形式使用高度和宽度。

例如：

width: 80%;
height: 80%;

css获得屏幕分辨率的高度

9 个答案: