使用引导程序（js，html）动态提供移动和桌面网站服务

Question

我最初将整个网站（单个页面）设计为响应式的，仅使用css和bootstrap 4中的一些内联类进行重新适应。

现在，我发现自己需要重新设计整个台式机版本（或者说，其结构与当前在移动设备上的外观非常不同）。

因此，我想保留我拥有的HTML，并继续将其用于移动设备，并修改其副本并将其用于桌面。

我认为最简单的方法是像现在一样保留一个index.html文件，复制整个index.html内部部分（在div与class =“ page”之间，基本上紧接在正文之后）并将其中一个设置为class="page d-none d-lg-block"和另一个class="page d-block d-lg-none" ，使用bs4类根据屏幕大小显示/隐藏内容。

我在js文件中有各种各样的内联js函数和其他引用id的函数，所以我的感觉是会产生错误，因为js两次看到相同的id或页面加载时出现了一些东西（由于bs4内联类显示内容） ，但只是要确保有人知道这是正确的做法（也是SEO明智的做法）？ 还是会和javascript搞混呢？

Answer 1

使现有页面具有响应能力并不是一件容易的事，但与使用变通办法隐藏在较小的断点和隐藏在较大的断点中相比，它具有更大的价值。

原因是：

• 您将拥有多余的组件，这意味着您的应用程序响应后，其大小将增加一倍，
• 如果使用静态内容而不使用数据库，则需要将内容维护在两个位置（较小和较大的断点）。

花更多的时间学习网格布局 ，并以正确的方式实施它。 将来您将更容易维护Web应用程序。