基础 CSS 显示全屏

有时候我们需要在网页上显示全屏的内容，比如视频、图片或特殊效果展示，这时候我们就需要用到 CSS 的全屏显示功能。

全屏显示基础

在 CSS 中，全屏显示有两种方式：

• 使用 height 100vh 让元素高度占据整个视口。
• 使用 position: fixed; top: 0; left: 0; bottom: 0; right: 0; 让元素固定在视口的四个角落。

具体代码如下：

/* 使用 height 100vh 实现全屏 */
.fullscreen {
  height: 100vh;
}

/* 使用 position 实现全屏 */
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

隐藏浏览器滚动条

如果在全屏显示时需要隐藏浏览器滚动条，可以使用以下代码：

body {
  overflow: hidden;
}

实现全屏切换效果

有时候我们需要在点击某个按钮或滚动页面到某个位置时，实现全屏显示效果。这时候我们可以使用 JavaScript 配合 CSS 动画实现效果。

具体实现步骤如下：

1. 首先，定义一个全屏显示的 CSS 类，比如 .fullscreen。
2. 其次，在 JavaScript 中获取要全屏显示的元素，并添加 .fullscreen 类。
3. 最后，通过 CSS 动画实现元素从原位置到全屏显示的位置移动。

示例代码如下：

<div class="container">
  <div class="fullscreen"></div>
  <!-- 其他内容 -->
</div>

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.fullscreen.active {
  opacity: 1;
}

const button = document.querySelector('.button');
const fullscreenElement = document.querySelector('.fullscreen');

button.addEventListener('click', () => {
  fullscreenElement.classList.toggle('active');
});

总结

全屏显示在网页开发中有着非常广泛的应用场景，掌握全屏显示的基础 CSS，可以帮助我们更好地实现网页效果，提供更好的用户体验。