Html 在制造响应组件时，您在什么时候将其分为两个组件？

我意识到这个问题没有一个答案，而且一如既往，“这要看情况而定”。欢迎所有讨论，并感谢专业的、基于经验的输入

你在什么时候把一个组件分成两个组件 — 一个用于移动ish大小，一个用于桌面ish大小，而不是在一个组件中包含大量复杂的CSS和“条件”HTML

我刚刚为一个网站制作了一个导航栏（令人兴奋！），桌面导航栏非常简单。它可以是一个哑功能组件。移动导航栏添加一些HTML和子组件、调整大小、重新格式化、需要打开/关闭状态等

为了调试和可维护性，似乎mobile给桌面版本增加了太多的复杂性，而桌面版本在移动代码中似乎没有意义。只是同一个文件中的大量CSS和HTML变得不那么简单，因为两种截然不同的行为会分散彼此的注意力

但为了性能、组件安装等原因，将其分解为一个带有两个子容器的容器标题并为React添加额外的工作将是一种牺牲

---

我很好奇，根据你的经验，你以前遇到过这个问题吗？你是如何决定解决这个问题的？为什么？你在什么时候分手？您更喜欢粒度组件的清晰性，还是将所有CSS和HTML放在一个位置的清晰性？谢谢

由于您使用的是React，您可以轻松检查它是移动的还是比移动的更大，并包括您需要的任何一个导航，如果您需要多个导航，最好只安装您需要的导航

但我还是想知道，为什么你在手机上的导航中添加了那么多东西/项目，而在桌面上却保持了这么简单？ 导航的意义不在于你只需点击一两下就可以访问所有内容吗

如果移动设备上需要如此复杂的导航，那么桌面上也需要更复杂的导航才有意义：）

别误会我的意思，我和你现在在同一个地方，但这一切都要回到你希望你的客户点击什么？ 如果转换只发生在几个链接上，那么就不需要庞大复杂的移动导航，只要确保用户可以访问他们可能需要的一切

毕竟，您可以轻松创建一个搜索表单，该表单将能够帮助您减少移动导航中所需的数据

---

并不是说我喜欢桌面上的大型导航，但如果在移动设备上有必要，我有一种感觉，它可能也在桌面上。

谢谢您的反馈！都是好的。我可能让我的移动导航听起来比实际更复杂。这是相当基本的，但与桌面版本没有逻辑相比，你可以称之为复杂。信息架构、样式、流程等是一致的，并考虑我希望用户点击的内容。（但谢谢你提出来！）你说在React中，我可以很容易地检查屏幕是否移动。我对React非常陌生，所以我想知道，您是指使用Javascript的窗口对象，还是React提供了一些我不知道的东西？谢谢Np，只是有时候我们喜欢过度思考一些组件，即使它们应该尽可能简单：）至于屏幕大小，你可以两者兼而有之——要么使用窗口对象，要么使用大脑JS，要么使用取决于你需要多少信息。如果您只需要屏幕大小，则无需包括任何额外的库。e、 g.这就是你可以从你的JS媒体查询中得到的，并且基于这些查询，你可以包括/排除某些组件：）此外，我们没有任何人可以告诉你何时将其分为两个组件，这主要取决于你。如果它开始变得太混乱，你使用一个，如果你说的桌面是如此简单，但移动是如此复杂，他们肯定听起来像一个不同的组件给我。我建议在react中尽可能将所有内容分解为更小的组件：）