CSS全屏是一種通過CSS樣式控制所呈現內容的大小和位置,使其完全覆蓋整個窗口的方法。類似于使用F11全屏模式的效果,但是并不是完全相同,CSS全屏更加靈活,并可以自定義所要顯示的內容。下面是實現CSS全屏的代碼:
html, body { height: 100%; margin: 0; padding: 0; } #fullscreen { height: 100%; width: 100%; position: fixed; left: 0; top: 0; z-index: 9999; }
在代碼中,首先需要將HTML和body的高度都設為100%,并把margin和padding都設為0,這樣就可以讓要顯示的內容充滿整個頁面。然后在CSS中定義一個ID為fullscreen的元素,將它的寬和高度都設為100%,并且使用fixed定位將它固定在窗口的左上角。
在HTML代碼中需要添加一個要進行CSS全屏的元素,并給它添加一個click事件,當點擊該元素時,就可以調用JavaScript代碼將全屏元素添加到頁面中來。下面是示例代碼:
<div id="myfullscreen"> <p>這里是要進行全屏顯示的內容...</p> <button onclick="toggleFullScreen()">全屏</button> </div> function toggleFullScreen() { var elem = document.getElementById("myfullscreen"); if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) { if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } } }
在代碼中,首先定義了一個ID為myfullscreen的元素,并給它添加了一個click事件,當點擊該元素時,就會調用toggleFullScreen()函數。函數中首先判斷當前瀏覽器是否支持全屏模式,如果不支持,則直接退出,并且如果當前已經是全屏模式,則退出全屏模式,否則就將myfullscreen元素全屏顯示。
上一篇css全局樣式的問題
下一篇css全局繁體字