如何在浏览器全屏模式下处理 CSS?

cssweb developmentfront end technology更新于 2024/9/5 16:44:17

我们可以使用 CSS :fullscreen 伪类为全屏模式下的网页定义样式。

CSS :fullscreen 伪类的语法如下 −

Selector:fullscreen {
   attribute: /*value*/
}

以下示例说明了 CSS :fullscreen 伪类。

示例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
}
:fullscreen {
   background-color: thistle;
   font-size: 2em;
}
:-webkit-full-screen {
   background-color: thistle;
   font-size: 2em;
}
:-ms-fullscreen {
   background-color: thistle;
   font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
   if (item.requestFullscreen) {
      item.requestFullscreen();
   } else if (item.webkitRequestFullscreen) {
      item.webkitRequestFullscreen();
   } else if (item.msRequestFullscreen) {
      item.msRequestFullscreen();
   }
}
</script>
</body>
</html>

输出

这将产生以下结果 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
   color: white;
   box-shadow: inset 0 0 40px green;
}
:fullscreen {
   background: url("https://images.unsplash.com/photo-1612149413930- 72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
:-webkit-full-screen {
   background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
:-ms-fullscreen {
   background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
   if (item.requestFullscreen) {
      item.requestFullscreen();
   } else if (item.webkitRequestFullscreen) {
      item.webkitRequestFullscreen();
   } else if (item.msRequestFullscreen)
      item.msRequestFullscreen();
   }
}
</script>
</body>
</html>