在开发 React.js 单页应用（SPA）时，需要让页面元素实现高度自适应，以应对各种屏幕大小和设备类型。本文将介绍如何实现页面元素高度自适应的方法，并提供详细的示例代码和指导意义。
使用 CSS Flexbox 布局
在 React.js 单页应用中，使用 CSS Flexbox 布局是实现页面元素高度自适应的常用方法之一。Flexbox 布局使得我们可以轻松地让页面元素垂直居中、宽度自适应，并且保持等间距排列。
下面是一个使用 Flexbox 布局实现的简单示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------
-------- ----- -
------ -
---- ----------------------
---- --------------------- -------
---- --------------------- -------
---- --------------------- -------
------
--
-
------ ------- ------ -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- ------- ------ - ----- - ------ ---- ------- ---- -------- ---- ----------------- -------- -
在上面的示例代码中，.container 元素使用 display: flex 属性指定 Flexbox 布局，并且使用 flex-direction: column 属性使得它包含的 .item 子元素垂直排列。justify-content: center; 和 align-items: center; 属性使得子元素在容器中垂直居中。最后，.item 元素使用 width: 80% 属性将元素宽度设为80%并使用 margin 属性为其添加等间距的外边距，使它们彼此之间保持距离。
使用 CSS Grid 布局
CSS Grid 布局也是实现页面元素高度自适应的方法之一。CSS Grid 布局使得我们可以轻松地创建灵活的网格布局，以及使用媒体查询来适应不同的屏幕尺寸和设备类型。
下面是一个使用 CSS Grid 布局实现的简单示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------
-------- ----- -
------ -
---- ----------------------
---- --------------------- -------
---- --------------------- -------
---- --------------------- -------
------
--
-
------ ------- ------ -------------------- ---- ------- ---------- - -------- ----- ---------------------- ---------------- ------------- ------ ---------------- ------- ------------ ------- ------- ------ - ----- - ------- ---- -------- ---- ----------------- -------- -
在上面的示例代码中，.container 元素使用 display: grid 属性指定 CSS Grid 布局，并且使用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 属性使得其包含的 .item 子元素和容器宽度自适应，并保持等间距排列。justify-content: center; 和 align-items: center; 属性使得子元素在容器中垂直居中。最后，.item 元素使用 margin 属性为其添加等间距的外边距，使它们彼此之间保持距离。
结论
在 React.js 单页应用中，使用 CSS Flexbox 布局和 CSS Grid 布局是两种常用的方法来实现页面元素高度自适应。通过灵活地使用这两种方法，我们可以帮助我们的页面实现适应不同的屏幕尺寸和设备类型，并提高用户体验。
代码示例：
https://codesandbox.io/s/react-js-spa-mian-yuan-su-gao-du-zi-ying-ying-yong-ru-he-shi-xian-ye-o1co9
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fd1b854471362601785c72