我们怎样才能让网站像亚马逊一样响应迅速？
How can we make websites as responsive as Amazon?
我正在用 ReactJs 中的小项目挑战自己，Tachyons 制作一个像 Amazon 一样响应迅速的网站（仅 front-end）。
这里有一个亚马逊可以做到而我没能做到的例子。
这是全宽的亚马逊页面
半宽的亚马逊页面。在这里我们可以看到亚马逊响应并改变了搜索栏的大小。
Amazon 的最小浏览器大小的网站。**此处的网站保持**与半宽时相同的大小。
如果您想尝试使用网络浏览器，access Amazon
我也试过，但试了很多都不成功，所以我在这里寻求帮助。
目前我正在使用 React-Device-Detect 来检测设备类型。我没有让网站响应，而是连续两次做同样的工作（一次针对网站，一次针对不同尺寸的手机，等等）我想同样的事情是由亚马逊完成的？ （在您的 phone、您的 PC 上检查 Amazon，然后在您的 PC 上使用最小宽度检查 Amazon，看看它与您的 phone 不同）
现在我遇到的问题如下图：
整页网站
网站最小页面。我们可以观察到一切都调整了大小，蓝色条的高度降低了，5 列看起来很糟糕
我应该使用 Bootstrap 吗？这是我唯一的解决方案吗？ Amazon 使用 Bootstrap 还是他们有自己的 'css framework'？
您可以使用一些 css 移动友好的框架（首先），它们都是响应式设计的。 Bootstrap 是一个非常受欢迎的。
根据您的目标，针对您的问题提供多种解决方案。
一个CSS框架（例如Bootstrap）
一个 React 组件库（例如 React Material UI）
我的第一个个人建议是 Material UI Grid 组件。它真的很容易实现，而且效果很好！完全推荐给 React 初学者开发人员。
第二个选项是 CSS 媒体查询和样式组件。这是一种更高级的技术，但它会产生更干净的代码。
提示：您还可以检查muuri UI 库。
从表面上看，Amazon 的网站并不是完全响应式的。我永远不必水平滚动。但是，您可以通过多种方式实现这一点。
Bootstrap 或基金会：响应式库
您可以将 Bootstrap 或 Foundation 安装到您的项目中。这些库为您完成所有响应式工作（大多数情况下，这里和那里有一些例外情况，您可以使用媒体查询解决这些问题）。
这两个库的文档都很棒，你可以单独通过文档来学习每个库。但是，有很多免费资源可以学习它们（尤其是 Bootstrap）。我也不会花钱学习。
我在下面列出了 Bootstrap 的一些资源（这是我一直使用和喜欢的，所以我对它了解更多）。
Bootstrap 资源：这里只是 Bootstrap
的一些资源
- Bootstrap 的网站：https://getbootstrap.com/
- w3 学校网站：https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
您可以浏览他们的 Bootstrap 教程。 link 是一个 table，它包含所有 bootstrap 类 和每个的演示。
- Youtube：您可以在youtube 上查找教程。我不会推荐任何特定的视频，但您可以找到最适合您的视频。
我建议只使用 HTML、CSS 和 Bootstrap（你的 React 站点的模板）来完成一个前端网页，以获得 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.
希望这对您有所帮助。
更新：
Instead of making the website responsive, I do the same job twice in a
row (once for the website and once for the mobile with different
sizes, etc.) I suppose that the same thing is done by Amazon?
此外，我不确定您到底想要什么移动设备，但您不必为移动设备单独创建任何东西。这就是响应的意义所在。当今世界的一切都是响应式的，实际上，很多事情都是 "mobile first"（尽管围绕这一点有很多争论）所以你真的应该响应式。使用响应式库或查询将为您完成所有这些工作。所以你不需要 React Device Detect。这些库已经为几乎每个屏幕尺寸设置了媒体查询（对 4k 的支持很少或不存在）。这意味着当您在单元格 phone 上访问您的网站时，它会自动调整。
如果您想要移动应用程序，那就完全不同了。亚马逊也有。您可以为此使用 React Native，并可能为该移动应用调整您的大部分 Web 应用源代码。
希望已经清楚了。
我正在用 ReactJs 中的小项目挑战自己，Tachyons 制作一个像 Amazon 一样响应迅速的网站（仅 front-end）。
这里有一个亚马逊可以做到而我没能做到的例子。
这是全宽的亚马逊页面
半宽的亚马逊页面。在这里我们可以看到亚马逊响应并改变了搜索栏的大小。
Amazon 的最小浏览器大小的网站。**此处的网站保持**与半宽时相同的大小。
如果您想尝试使用网络浏览器，access Amazon
我也试过，但试了很多都不成功，所以我在这里寻求帮助。
目前我正在使用 React-Device-Detect 来检测设备类型。我没有让网站响应，而是连续两次做同样的工作（一次针对网站，一次针对不同尺寸的手机，等等）我想同样的事情是由亚马逊完成的？ （在您的 phone、您的 PC 上检查 Amazon，然后在您的 PC 上使用最小宽度检查 Amazon，看看它与您的 phone 不同）
现在我遇到的问题如下图：
整页网站
网站最小页面。我们可以观察到一切都调整了大小，蓝色条的高度降低了，5 列看起来很糟糕
我应该使用 Bootstrap 吗？这是我唯一的解决方案吗？ Amazon 使用 Bootstrap 还是他们有自己的 'css framework'？
您可以使用一些 css 移动友好的框架（首先），它们都是响应式设计的。 Bootstrap 是一个非常受欢迎的。
根据您的目标，针对您的问题提供多种解决方案。
一个CSS框架（例如Bootstrap）
一个 React 组件库（例如 React Material UI）
我的第一个个人建议是 Material UI Grid 组件。它真的很容易实现，而且效果很好！完全推荐给 React 初学者开发人员。
第二个选项是 CSS 媒体查询和样式组件。这是一种更高级的技术，但它会产生更干净的代码。
提示：您还可以检查muuri UI 库。
从表面上看，Amazon 的网站并不是完全响应式的。我永远不必水平滚动。但是，您可以通过多种方式实现这一点。
Bootstrap 或基金会：响应式库
您可以将 Bootstrap 或 Foundation 安装到您的项目中。这些库为您完成所有响应式工作（大多数情况下，这里和那里有一些例外情况，您可以使用媒体查询解决这些问题）。
这两个库的文档都很棒，你可以单独通过文档来学习每个库。但是，有很多免费资源可以学习它们（尤其是 Bootstrap）。我也不会花钱学习。
我在下面列出了 Bootstrap 的一些资源（这是我一直使用和喜欢的，所以我对它了解更多）。
Bootstrap 资源：这里只是 Bootstrap
的一些资源- Bootstrap 的网站：https://getbootstrap.com/
- w3 学校网站：https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp 您可以浏览他们的 Bootstrap 教程。 link 是一个 table，它包含所有 bootstrap 类 和每个的演示。
- Youtube：您可以在youtube 上查找教程。我不会推荐任何特定的视频，但您可以找到最适合您的视频。
我建议只使用 HTML、CSS 和 Bootstrap（你的 React 站点的模板）来完成一个前端网页，以获得 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.
希望这对您有所帮助。
更新：
Instead of making the website responsive, I do the same job twice in a row (once for the website and once for the mobile with different sizes, etc.) I suppose that the same thing is done by Amazon?
此外，我不确定您到底想要什么移动设备，但您不必为移动设备单独创建任何东西。这就是响应的意义所在。当今世界的一切都是响应式的，实际上，很多事情都是 "mobile first"（尽管围绕这一点有很多争论）所以你真的应该响应式。使用响应式库或查询将为您完成所有这些工作。所以你不需要 React Device Detect。这些库已经为几乎每个屏幕尺寸设置了媒体查询（对 4k 的支持很少或不存在）。这意味着当您在单元格 phone 上访问您的网站时，它会自动调整。
如果您想要移动应用程序，那就完全不同了。亚马逊也有。您可以为此使用 React Native，并可能为该移动应用调整您的大部分 Web 应用源代码。
希望已经清楚了。