实现full-screen效果,最简单的方式就是使用CSS3的vh
和vw
单位,分别表示视口高度和宽度的百分比。我们可以将元素的高度和宽度都设置为100vh和100vw,就可以实现全屏效果。
.my-element { height: 100vh; width: 100vw; }
如果想要在全屏状态下保持元素的宽高比例,可以使用aspect-ratio
属性。
.my-element { aspect-ratio: 16/9; height: 100vh; width: 100vw; }
实现sticky效果,可以使用position: sticky
属性。将元素的position属性设置为sticky后,元素就会在滚动到指定位置时固定在屏幕上。
例如,我们想要实现页面顶部的导航栏在滚动到一定位置时固定在屏幕上:
nav { position: sticky; top: 0; background-color: #fff; z-index: 999; }
在这个示例中,导航栏的position属性设置为sticky,top属性设置为0,表示将导航栏固定在页面顶部。background-color属性设置为白色,z-index属性设置为999,可以让导航栏在滚动时覆盖其他元素。