Material Design 是 Google 推出的一套设计语言，旨在为用户提供更加美观、流畅和更容易使用的 Web、移动和桌面应用程序。全屏效果是其中一个很常见的设计元素，能够让用户感受到更加沉浸式的体验。在本文中，我们将学习如何使用 HTML、CSS 和 JavaScript 实现 Material Design 的全屏效果。
设置全屏样式
要实现全屏效果，首先需要设置一个全屏的样式。使用 CSS 可以很容易地实现这一点：
-- -------------------- ---- ------- ----------- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- -------- ---- ----------------- ------- -- -- ----- -------- ----- ---------------- ------- ------------ ------- -
在这个样式中，我们设置了元素的位置为固定定位，同时设置了宽和高为 100%，这样它就可以占据整个屏幕的空间。我们还设置了背景颜色为半透明黑色，并让元素进行了居中显示。
实现全屏效果
接下来，我们需要使用 JavaScript 来让元素进入全屏状态。在 Web 中，可以使用 Fullscreen API 来实现这一点：
-- -------------------- ---- -------
-------- ------------------ -
--- ------- - --------------------------------------
--- ------------ -
-------------------------- --
-------------------------------- --
----------------------------- --
-----------------------------
-- --------------- -
-- --------------------------- -
----------------------------
- ---- -- --------------------------------- -
----------------------------------
- ---- -- ------------------------------ -
-------------------------------
- ---- -- ----------------------------- -
------------------------------
-
- ---- -
-- ------------------------- -
--------------------------
- ---- -- ------------------------------- -
--------------------------------
- ---- -- ------------------------------ -
-------------------------------
- ---- -- --------------------------- -
----------------------------
-
-
-在这个函数中，我们首先获取了全屏元素，然后判断它是否处于全屏状态。如果没有，那么我们就调用相应的 API 使元素进入全屏状态。否则，我们就调用退出全屏的 API，让元素退出全屏状态。
按钮点击事件
最后，我们需要将上述全屏效果和一个按钮进行关联，使得用户可以通过点击按钮来进入或退出全屏状态。在 HTML 中，可以添加以下代码：
<div class="fullscreen"> <button onclick="toggleFullScreen()">全屏</button> </div>
这里我们添加了一个带有按钮的 div 元素，并将其样式设置为我们之前定义的全屏样式。我们还在按钮上添加了一个点击事件，将其与 toggleFullScreen 函数关联起来。
总结
在本文中，我们介绍了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 的全屏效果。我们首先定义了一个全屏样式，然后使用 Fullscreen API 来实现全屏效果，并将这一效果与一个按钮进行了关联。这样，我们就可以轻松地为我们的应用程序添加 Material Design 风格的全屏效果了！
示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------------
-------
----------- -
--------- ------
---- --
----- --
------ -----
------- -----
-------- ----
----------------- ------- -- -- -----
-------- -----
---------------- -------
------------ -------
-
------ -
----------- ---------------
------- -----
-------------- ----
------ -----
---------- -----
-------- ---- -----
------- --------
-------- -----
-
--------
-------
------
---- -------------------
------- ----------------------------------------
------
--------
-------- ------------------ -
--- ------- - --------------------------------------
--- ------------ -
-------------------------- --
-------------------------------- --
----------------------------- --
-----------------------------
-- --------------- -
-- --------------------------- -
----------------------------
- ---- -- --------------------------------- -
----------------------------------
- ---- -- ------------------------------ -
-------------------------------
- ---- -- ----------------------------- -
------------------------------
-
- ---- -
-- ------------------------- -
--------------------------
- ---- -- ------------------------------- -
--------------------------------
- ---- -- ------------------------------ -
-------------------------------
- ---- -- --------------------------- -
----------------------------
-
-
-
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1c8db83d39b48815fcd3a