Mobile 将MVC网站转换为响应性网站

在调查谷歌搜索引擎优化问题时，没有移动网站。我最近了解到，缺乏合适的移动网站会降低搜索评级，移动和桌面网站的不同内容也可能会损害你的SEO

目前我们有一个MVC站点，它的设计不是为了响应。我不想创建需要更多维护的东西。（即新建移动站点或为移动版本创建新视图…）

我了解到，从技术上来说，将站点转换为响应性站点是可行的，但不建议这样做，原因有以下两个：

当前的网站在小屏幕上可能无法正常工作（CSS问题，修改CSS可能会带来痛苦和风险）

当前站点上的内容太多

在谷歌搜索时，我发现这是最好的方式。 桌面浏览器和移动浏览器使用相同的控制器和视图，但根据设备类型使用不同的Razor布局渲染视图。对于移动设备，此选项将需要新的CSS和新的

\u布局

页面。 然后将

\u ViewStart

修改为

Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";

---

我想继续使用上述方法，但如果有人在这方面有任何经验，我想知道实现这一点的最佳实践、推荐方法和技术可能性。

ASP.NET MVC应用程序默认使用引导响应

---

处理响应性设计通常有三种方法：

• 使用响应性设计框架

• 使用CSS媒体查询

• 使用百分比

使用这些工具的难易程度最终取决于您现有的项目有多复杂，以及您愿意做多少工作和改变以使其响应

考虑响应性设计框架（基本上是修改和更新现有项目的所有标记）

这将允许您的站点或应用程序基本上在任何设备上运行（这样做看起来很不错）无论平台是什么，只要它有一个internet浏览器可以访问它，并且将使开发变得更加容易，因为您只需要在一个区域内创建页面，响应式设计的美妙之处在于它将根据当前平台和设备适当地设置页面样式

它并不是真正自动的，您可能需要对它进行一些修改，以使一切正常工作，并使其看起来像它应该的那样，但它可能是处理这种情况的最佳方法（取决于您使用的控件）。有一些响应性设计框架和样板，您可以使用它们在您的站点中实现，例如

这些可以相当容易地集成到Web表单、MVC或Web页面中，基本上就是您需要使用的全部：

在这里使用框架的主要问题是，您已经设计好了您的站点，并且已经开始运行了。当您从项目开发的一开始就使用这些框架时，它们工作得非常好，但是当您试图迁移现有项目以使用它们时，它们将需要大量的工作

这些框架有非常特定的类和样式，它们实际上在响应性设计方面做了很多不同的事情，您必须使用这些新类来基本上替换所有现有的类。这不是最简单的迁移，但无论如何也不是不可能的，这将是我的建议

使用（如果您想在没有框架的情况下创建这种响应能力，这是必要的，但您需要做更多的工作）

您还可以使用CSS媒体查询来实现这一点，CSS媒体查询以特定的分辨率和屏幕大小以及相应的样式元素为目标，但是这需要更多的手动操作，并且您必须为每个目标大小编写查询

与使用框架相比，这些需要做的工作要多得多，因为您必须编写查询来针对您想要的所有不同的主要分辨率，然后在每个分辨率中手动调整某些元素的大小。基本上，您必须为每个要针对的分辨率创建一个迷你样式表或媒体查询，并手动输入要用于该特定分辨率的值

我以前做过这种更“亲自动手”的响应式设计，但让某个经过尝试和验证的框架（如其中一个框架）为您处理它要容易得多。查看下面一个非常简单的示例，该示例将演示CSS媒体查询的工作原理：

        <style type='text/css'>
  /* Only affects 1600px width */
  @media only screen and (max-width: 1600px){ body { background: green; }}
  /* Only affects 1200px width */
  @media only screen and (max-width: 1200px){ body { background: blue; }}
  /* Only affects 900px width */
  @media only screen and (max-width: 900px){ body { background: yellow; }}
  /* Only affects 600px width */
  @media only screen and (max-width: 600px){ body { background: purple; }}
  /* Only affects 400px width */
  @media only screen and (max-width: 400px){ body { background: orange; }}
     </style>

/*仅影响1600px宽度*/
@仅媒体屏幕和（最大宽度：1600px）{body{background:green；}
/*仅影响1200px宽度*/
@仅媒体屏幕和（最大宽度：1200px）{body{背景：蓝色；}
/*仅影响900px宽度*/
@仅媒体屏幕和（最大宽度：900px）{body{background:yellow；}
/*仅影响600px宽度*/
@仅媒体屏幕和（最大宽度：600px）{body{背景：紫色；}
/*仅影响400px宽度*/
@仅媒体屏幕和（最大宽度：400px）{body{背景：橙色；}

当您调整浏览器/窗口的大小时，将相应地应用样式

（）

使用百分比（提供“响应性”感觉的另一个选项，但也需要CSS媒体查询才能真正“响应性”）

您还可以考虑迁移所有内容，使用基于百分比的大小，而不是显式的像素大小，但这将比执行上述媒体查询更为有效。

这将基本上要求您使用百分比缩放站点上的所有内容，并定义项目的最小和最大高度和宽度。您可能需要将其与媒体查询结合使用，以获得