如何使具有像素大小的反应应用程序适应不同的屏幕尺寸？答案

【问题标题】：How to make react app with pixel sizing adapt to different screen sizes?如何使具有像素大小的反应应用程序适应不同的屏幕尺寸？
【发布时间】：2021-02-14 22:49:54
【问题描述】：

我一直在使用 react 制作网站，并且一直在使用带有 classNames 的 css。我还关注了一个 figma 文档，其中 figma 屏幕有一定的尺寸，比如说 x 像素 x y 像素。但是，在其他计算机上，它可能具有更大或更小的像素尺寸（a 像素乘 b 像素）。我已经将 x x y 像素用于 div 尺寸以及按钮大小等。因此，当我在其他像素尺寸较大的计算机上打开我的应用程序时，屏幕的一部分只是白色的，它仍然会像在较小的屏幕上一样显示网站。有没有办法解决这个问题，即使我使用了像素值，我的应用也会适应不同大小的屏幕？或者，我是否必须返回并将所有内容更改为百分比？

【问题讨论】：

我认为通常在使 Web 代码具有响应性时，您需要使用 some 相对大小值，即视口百分比、父元素百分比、rem 是相对的基本字体大小等...像素值不是动态的也不是相对的，每个设备/屏幕可以有不同大小的像素以及不同的像素密度。

标签： css reactjs

【解决方案1】：

在构建 UI 时需要考虑比例。

1- 使用percentage(%) 表示宽度，aspectRatio 表示高度，反之亦然。

container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%" of your width
}

2- 将 flex 用于无法完成的工作百分比。例如，如果您在列表中有任意大小的项目，并且您希望它们共享相同的大小。为每个人分配flex: 1

3- 使用 EStyleSheet 中的 rem 而不是像素。 rem 是一个比例因子。 例如，如果您的 rem 为 2，您的“11rem”将变为“11*2”=“22”。如果我们将rem 与屏幕尺寸成比例，您的 UI 将随任何屏幕尺寸缩放。

//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});
enter code here
//how to use rem
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%"
padding: "8rem", //it'll scale depend on the screen sizes.
}

4- 对可能超出框的内容使用 scrollView。 例如，TextView

5- 每次考虑使用像素时，请考虑在方法 3 中使用 rem。

【讨论】：