CSS3全屏顯示(Fullscreen API)是一項HTML5標準規范,用于在網頁中實現全屏顯示效果。
在傳統的網頁開發中,全屏模式只能通過JavaScript和Flash等工具來實現。但是隨著HTML5的發展,CSS3全屏顯示成為一項可以原生支持的功能。
:root{ scroll-behavior: smooth; } .full-screen{ width: 100%; height: 100%; background-color: #333; color: #fff; position: fixed; top: 0; left: 0; z-index: 999; display: flex; justify-content: center; align-items: center; font-size: 2rem; text-align: center; } .full-screen button{ padding: 1rem; background-color: #fff; color: #333; border: none; font-size: 1.2rem; cursor: pointer; }
以上代碼展示了一個簡單的全屏顯示的例子。通過設置元素的寬度、高度為100%,并設置定位為fixed,實現元素在窗口中全屏顯示。同時通過flex布局,讓子元素居中對齊。
通過Fullscreen API規范,我們可以通過JavaScript代碼來控制全屏模式的開啟和關閉。
var el = document.documentElement, fullscreenButton = document.querySelector('.fullscreen-btn'); fullscreenButton.addEventListener('click', function() { if (document.fullscreenElement) { document.exitFullscreen(); fullscreenButton.innerHTML = '全屏顯示'; } else { el.requestFullscreen(); fullscreenButton.innerHTML = '退出全屏'; } });
以上代碼表示了一個簡單的控制全屏模式的JavaScript代碼。通過Fullscreen API提供的方法,我們可以實現在按鈕的點擊事件中讓元素進入全屏模式或者退出全屏模式。
總的來說,CSS3全屏顯示提供了更加簡單、便捷的方式實現網頁全屏展示。在實際開發中,我們可以根據需求使用Fullscreen API來控制網頁的全屏展示效果。