css占满屏幕单位

CSS中有一种单位，可以让元素占满整个屏幕。这种单位叫做Viewport（视口）单位。

/* 使用Viewport单位 */
.element {
  width: 100vw; /* 宽度占满整个屏幕 */
  height: 100vh; /* 高度占满整个屏幕 */
}

Viewport单位有两种：

• vw：相当于1个视口宽度的百分比，例如100vw等于整个屏幕的宽度
• vh：相当于1个视口高度的百分比，例如100vh等于整个屏幕的高度

Viewport单位的使用场景：

• 全屏的图片或视频背景
• 移动端页面的响应式设计
• 弹出层或模态框的定位

需要注意的是，Viewport单位在不同的设备上会有不同的效果。例如，以iPhone 6为例，它的视口宽度为375px，但是如果用户把它旋转为横屏模式，视口宽度就变成了667px。

因此，在使用Viewport单位时，需要考虑不同设备的不同视口宽度和高度，以及用户是否开启了缩放功能，以避免样式失真或布局错乱的情况。