全屏页面制作 css

全屏页面制作 CSS

要实现全屏页面效果，需确保页面内容占满整个视口（viewport），以下为具体实现方法：

方法一：使用 viewport 单位

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

• 100vw 和 100vh 分别代表视口宽度和高度的 100%
• overflow: hidden 可防止滚动条出现

方法二：绝对定位覆盖

body {
  position: relative;
  margin: 0;
  padding: 0;
}

.fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

方法三：Flexbox 布局

body {
  display: flex;
  margin: 0;
  min-height: 100vh;
}

.fullscreen-content {
  flex: 1;
}

方法四：Grid 布局

body {
  display: grid;
  margin: 0;
  min-height: 100vh;
  grid-template-rows: 1fr;
}

注意事项

• 移动端需添加 meta 标签确保正确缩放：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 图片全屏需设置：

  .fullscreen-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  }

兼容性方案

对于不支持 viewport 单位的旧浏览器：

html, body {
  width: 100%;
  height: 100%;
}