我们如何使网站像亚马逊一样具有响应性？

Question

我正在用ReactJs和Tachyons中的一个小项目挑战自己，以创建一个像Amazon一样敏感的网站（仅限前端）。

这是亚马逊可以做的事情的一个例子，而我却无法实现。

这是全尺寸的亚马逊页面

Amazon页面宽度为一半。在这里，我们可以看到Amazon做出了响应，并更改了搜索栏的大小。

亚马逊网站的最小浏览器尺寸。**这里的网站**尺寸与半宽度时相同。

如果要尝试使用网络浏览器，请access Amazon

我尝试做同样的事情，但尝试了很多失败的事情，所以这是我寻求帮助的地方。

当前，我正在使用React-Device-Detect来检测设备类型。我没有让网站具有响应能力，而是连续两次执行相同的工作（一次访问该网站，一次访问具有不同大小的移动电话，等等）。我想亚马逊也做同样的事情吗？ （在手机上，在PC上检查Amazon，然后在PC上以最小宽度检查Amazon，并确认它与手机不同）

现在我在下图中遇到的问题：

整页网站

网站最少页面。我们可以观察到所有内容都已调整大小，蓝色条的高度减小了，这5列看上去很糟糕

我应该使用Bootstrap，这是我唯一的解决方案吗？亚马逊是在使用Bootstrap还是拥有自己的“ css框架”？

Answer 1

从外观上看，亚马逊的网站没有完全响应。我永远不必水平滚动。但是，您可以通过两种方法来实现。

引导程序或基金会：响应式图书馆

您可以将Bootstrap或Foundation安装到您的项目中。这些库为您完成了所有响应式工作（在大多数情况下，您可以在此处和此处通过媒体查询解决这些异常）。

两个库的文档都令人难以置信，您可以仅通过文档学习每个库。但是，有很多免费资源可用于学习它们（尤其是Bootstrap）。我也不愿意学习。

我在下面列出了一些有关Bootstrap的资源（这是我一直使用并喜欢的，所以我对此有更多了解）。

Bootstrap资源：这里仅是Bootstrap的一些资源

1. 引导程序的网站：https://getbootstrap.com/
2. w3学校网站：https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp 您可以遍历他们的Bootstrap教程。该链接指向包含每个引导类和演示的表。
3. Youtube：您可以在youtube上查找教程。我不会推荐任何特定的视频，但您可以找到最适合自己的视频。

我建议您仅使用HTML，CSS和Bootstrap（这是您的React网站的模板）来完成一个前端网页，以使您首先使用Bootstrap。

要与ReactJS结合，您可以仅使用npm i bootstrap安装引导程序，但不会获得下拉菜单，弹出窗口，工具提示等功能。这就是react-bootstrap和reactstrap之类的软件包的加入位置。它们为您提供功能和响应能力。

CSS媒体查询

您可以针对特定的页面宽度或屏幕尺寸设置媒体查询。这是一项非常繁琐的任务，如果您尝试将其应用于网站的每个元素，您将需要编写和管理许多CSS代码。

示例：这表示，对于宽度为720px或更小的任何屏幕，请将此背景应用于网站的正文。

@media only screen and (max-width: 720px) {
  body {
    background-color: #ddd;
  }
}

显然，这可能变得更加复杂。您可以在@media大括号内放置任何CSS并定位任何类名。因此，您不必只放置body。

希望这会有所帮助。

更新：

  

我没有使网站具有响应能力，而是在同一时间两次   行（一次用于网站，一次用于手机）   大小等），我想亚马逊也做同样的事情？

此外，我不确定您到底想要什么手机，但是您不必为手机创建任何单独的东西。这就是响应的重点。当今世界中的所有事物都是响应式的，实际上，很多事情都是“移动优先”的（尽管围绕它的争论很多），所以您确实应该响应式。使用响应式库或查询将为您完成所有这些工作。因此，您不需要反应设备检测。这些库中的媒体查询实际上已经针对每个屏幕尺寸进行了设置（对4k的支持很少或不存在）。这意味着，当您使用手机访问网站时，它将自动进行调整。

如果您想要一个移动应用程序，那就完全不同了。亚马逊也有。您可以为此使用 React Native ，并可能将大部分Web应用程序源改编为该移动应用程序。

希望如此。

Answer 2

您可以使用一些移动友好的CSS框架（首先），它们都是响应式设计的。 Bootstrap很受欢迎。

Answer 3

有关目标的许多解决方案，取决于您的目标。

1. CSS media-queries

2. 一个CSS框架（例如Bootstrap）

3. React组件库（例如React Material UI）

我的第一个个人推荐是 Material UI Grid组件。这真的很容易实现，并且做得很好！完全推荐给React初学者开发人员。

第二个选项是 CSS媒体查询以及样式化组件。它是一种更高级的技术，但它可以使代码更简洁。

提示：您还可以检查muuri UI库。