css 如何获取屏幕高度和宽度

在前端开发中，获取屏幕高度和宽度是非常常见的需求。CSS提供了几种方法来实现这个功能。

方法一：使用vw和vh单位

html, body {
      height: 100%;
}
.container {
      height: 100vh;
      width: 100vw;
}
    

vw和vh单位分别代表视口宽度和高度的百分比，可以直接用于设置元素的高度和宽度。以上代码中，在html和body元素中设置了高度为100%，然后在.container元素中设置高度为100vh，宽度为100vw，即可使.container元素占满整个视口。

方法二：使用JavaScript获取屏幕高度和宽度，并将其应用于CSS中

var screenHeight = window.innerHeight;
    var screenWidth = window.innerWidth;
    document.documentElement.style.setProperty('--screen-height', screenHeight + 'px');
    document.documentElement.style.setProperty('--screen-width', screenWidth + 'px');

以上代码中，我们通过JavaScript获取了屏幕高度和宽度，并将其保存在screenHeight和screenWidth变量中。然后，我们使用CSS变量将这些值应用于文档根元素上。在CSS中，可以通过var()函数来使用这些变量：

.container {
      height: var(--screen-height);
      width: var(--screen-width);
}
    

这样，.container元素的高度和宽度就与屏幕的高度和宽度相等了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！