React Native 设计响应式应用的最佳实践是什么？[已关闭]

pbwdgjma 于 2022-12-30 发布在 React

关注(0)|答案(1)|浏览(116)

- 已关闭**。此问题为opinion-based。当前不接受答案。
- 想要改进此问题吗？**请更新此问题，以便editing this post可以用事实和引文来回答。

昨天关门了。
Improve this question
我正在react native中制作一个应用程序，我希望它在不同大小的屏幕上看起来都很漂亮。
如何做到这一点的最佳实践是什么？例如，我有一个后退按钮，在大多数页面上。我希望它在左上角，我相信有很多方法可以自动完成这一点使用React导航等，但为了学习的目的，什么是最好的方法来确保它在任何屏幕上看起来很好？
是否可以使用像素将其设置为以下样式：

backButton: {
    alignSelf: "flex-beginning",
    marginLeft: 10,
    paddingTop: 20,
  },

还是用百分比

backButton: {
    alignSelf: "flex-beginning",
    marginLeft: "2%",
    paddingTop: "8%",
  },

或者有更好的办法我没考虑？
谢谢你。

react-native

来源：https://stackoverflow.com/questions/74940299/what-are-best-practices-for-styling-a-responsive-app

1条答案

按热度按时间

zwghvu4y1#

介质查询是最佳选项，为此您可以使用Bootstrap。
下面是一些实现此功能的自定义示例代码。

@media (max-width: 600px) {
  /* styles for screens with a width of 600px or smaller */
  .container {
    width: 100%;
  }
  .column {
    width: 100%;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* styles for screens with a width between 601px and 900px */
  .container {
    width: 80%;
  }
  .column {
    width: 50%;
  }
}

@media (min-width: 901px) {
  /* styles for screens with a width of 901px or larger */
  .container {
    width: 60%;
  }
  .column {
    width: 33%;
  }
}

赞(0）回复(0）举报 2022-12-30

我来回答

React Native 设计响应式应用的最佳实践是什么？[已关闭]

1条答案

相关问题

热门标签

最新问答