将现有 Web 应用程序 UI 转换为响应式 Web 应用程序答案

【问题标题】：Convert Existing web application UI into responsive web application将现有 Web 应用程序 UI 转换为响应式 Web 应用程序
【发布时间】：2018-04-05 16:56:17
【问题描述】：

我有单页 ajax Web 应用程序。所有 HTML 结构都通过纯 javascript 或 jQuery 动态构建。现在我想将这个现有的网络应用程序转换为响应式应用程序。我在谷歌上搜索过，但我无法获得具体的流程来执行此操作。我还看到了很多 CSS 框架，例如 bootstrap、foundation 等。这些有助于摆脱这种情况吗？如果是，那么如何？我的目标分辨率是 800*600 到 1920*900。

【问题讨论】：

这没有什么特别的技巧或工作流程。您需要做的就是选择一个响应式 CSS 框架并使用它重新设置 Web 应用程序的外观，并在使用时应用适当的类。

标签： javascript jquery css responsive-design

【解决方案1】：

您可以使用 Bootstrap，只需包含文件 - 如果您只想要响应能力，CSS 就足够了，或者尝试 Initializr - 获取正确的模板并将现有代码复制到其中。

【讨论】：

【解决方案2】：

您还可以查看 ASP 中的 FriendlyURLs 功能：http://www.hanselman.com/blog/IntroducingASPNETFriendlyUrlsCleanerURLsEasierRoutingAndMobileViewsForASPNETWebForms.aspx。这将允许您在您的网站中创建网页的移动版本。

如果这不是您的目标，并且您可以使用商业软件，您可以尝试 Telerik 的 RadPageLayout 控件：http://www.telerik.com/help/aspnet-ajax/page-layout-overview.html。在这里查看：http://demos.telerik.com/responsive-web-design-aspnet/。

【讨论】：

【解决方案3】：

可以使用 CSS 媒体查询创建响应式 Web 应用程序。请在下面找到有用的链接http://webdesignerwall.com/tutorials/responsive-design-in-3-steps，它提供了响应式方法的概述以及屏幕截图和演示

祝你好运！

【讨论】：

Pravin Vaichal@，你能解释一下如何在 CSS 媒体查询中重构 HTML 吗？
@Rickyrock 1) 如果你用谷歌搜索，你会发现很多很好的响应式网站文章 2) 像你这样的基本步骤可以从基本的线框开始，并设计你的应用在桌面 - 平板电脑 - 移动设备中的外观 3)因此，您可以像上面给定的 url 那样设置断点，并为块元素（如 header、menu、sidebar、main、footer）等设置 CSS

【解决方案4】：

Telerik 提供了另一种通过 PageLayout 控件http://www.telerik.com/products/aspnet-ajax/responsive-page-layout.aspx 使您的 ASP.NET 页面响应的方法。以下响应式网站是用它制作的：http://demos.telerik.com/responsive-web-design-aspnet/

【讨论】：