从外观上看，亚马逊的网站并没有完全响应。我永远不必水平滚动。不过，您可以通过多种方式实现这一目标。
Bootstrap 或 Foundation：响应式库
您可以将 Bootstrap 或 Foundation 安装到您的项目中。这些库为您完成所有响应式工作（大多数情况下，您可以通过媒体查询修复一些例外情况）。
这两个库的文档都令人难以置信，您可以仅通过文档来学习每个库。但是，有很多免费资源可以学习它们（尤其是 Bootstrap）。我也不会花钱学习。
我在下面列出了一些 Bootstrap 资源（这是我一直使用和喜欢的，所以我对它了解更多）。
Bootstrap 资源：这里只是 Bootstrap 的一些资源
- Bootstrap 的网站：https ://getbootstrap.com/
- w3 Schools 网站：https ://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
您可以浏览他们的 Bootstrap 教程。该链接指向一个表，其中包含每个引导类和演示。
- Youtube：您可以在 youtube 上查找教程。我不会推荐任何特定的视频，但您可以找到最适合您的视频。
我建议只使用 HTML、CSS 和 Bootstrap（一种用于您的反应站点的模板）来完成前端网页，以便首先体验 Bootstrap。
要与 ReactJS 结合，您可以只安装 bootstrap：npm i bootstrap但您不会获得下拉、弹出框、工具提示等功能。这就是软件包喜欢react-bootstrap和reactstrap出现的地方。它们为您提供功能和响应能力。
CSS 媒体查询
您可以为特定页面宽度或屏幕尺寸设置媒体查询。这是一项非常繁琐的任务，如果您尝试将其应用于网站的每个元素，您将需要编写和管理大量 CSS 代码。
示例：这表示，对于任何 720 像素宽或更小的屏幕，将此背景应用于网站主体。
@media only screen and (max-width: 720px) {
body {
background-color: #ddd;
}
}
显然，这可能会变得更加复杂。@media您可以在花括号内放置任何 CSS 并定位任何类名。所以，你不必只放body.
希望这可以帮助。
更新：
我没有让网站响应，而是连续两次做同样的工作（一次用于网站，一次用于不同尺寸的移动设备等）。我想亚马逊也做了同样的事情？
另外，我不确定您对移动设备到底想要什么，但您不必为移动设备创建任何单独的东西。这就是响应的重点。当今世界的一切都是响应式的，实际上，很多事情都是“移动优先”（尽管围绕这一点有很多争论），所以你真的应该做响应式。使用响应式库或查询将为您完成所有这些工作。所以你不需要React Device Detect。这些库已经为几乎每个屏幕尺寸设置了媒体查询（对 4k 的支持很少或不存在）。这意味着当您在手机上访问您的网站时，它会自动调整。
如果你想要一个移动应用程序，那就完全不同了。亚马逊也有。您可以为此使用React Native，并且可能会针对该移动应用程序调整您的大部分 Web 应用程序源。
希望这很清楚。
