[分享]css中如何获取屏幕的高

在CSS中，获取屏幕高度有多种方法。以下是一些常见的方法：方法一： 使用CSS3的单位vh来表示当前视口（Viewport）的高度，1vh相当于视口高度的1。 代码示例： height: 100vh;...

在CSS中，获取屏幕高度有多种方法。以下是一些常见的方法：

方法一：
使用CSS3的单位vh来表示当前视口（Viewport）的高度，1vh相当于视口高度的1%。

代码示例：
height: 100vh;

方法二：
使用JavaScript的方法来获取屏幕的高度，然后在CSS样式中使用。

代码示例：
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.documentElement.style.fontSize = (screenHeight / 10) + 'px';

上述代码中，将通过JavaScript获取到屏幕高度，然后将其除以10，并设置root节点的字体大小为结果值。这样，我们就可以使用rem单位计算所有元素的大小。

方法三：
使用CSS3的Media Query来根据设备屏幕的大小自适应样式。

代码示例：
@media screen and (max-width: 768px) {
  /* CSS for screens smaller than 768px */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS for screens between 769px and 1024px */
}

@media screen and (min-width: 1025px) {
  /* CSS for screens larger than 1025px */
}

通过Media Query，我们可以在不同尺寸的屏幕上适应不同的样式。