mobile - 将MVC网站转换为响应

Question

同时调查谷歌搜索引擎优化问题有关没有移动网站。我最近了解到，缺乏合适的移动网站会降低搜索率，而移动网站和桌面网站的不同内容可能也会损害你的搜索引擎优化。
目前，我们有一个MVC网站，设计不是为了响应。我不想创造一些需要更多维护的东西。（即新的移动站点或为移动版本创建新视图…）。
我了解到，从技术上讲，将站点转换为响应站点是可行的，但不建议这样做，原因如下：
当前站点在小屏幕上可能无法正常工作（css问题，修改css可能是一个痛苦和风险）。
我们现在网站上的东西太多了。
在谷歌搜索时，我发现这是最好的方法。
对桌面和移动浏览器使用相同的控制器和视图，但是根据设备类型使用不同的Razor布局呈现视图。此选项将要求移动设备使用新的css和新的_Layout页面。
然后将_ViewStart修改为

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

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

Answer 1

处理响应性设计通常有三种方法：
使用响应式设计框架
使用css媒体查询
使用百分比
每一个项目的易用性最终都将取决于你现有项目的复杂程度，以及你愿意做多少工作和做出多少改变以使其响应。
考虑一个响应式设计框架（基本上是修改和更新现有项目的所有标记）
这将允许你的网站或应用程序基本上运行在任何设备上（这样做看起来很好），无论平台是什么，只要它有一个互联网浏览器来访问它，这将使它更容易开发，因为你只需要在一个区域内创建你的页面，而且响应速度很快。esign是它将根据当前平台和设备适当地设置页面的样式。
它并不是真的自动的，你可能需要对它稍加修改，使所有的东西都能正常工作和看起来，但它可能是处理这种情况的最佳方法（取决于你正在使用的控件）。有响应性的设计框架和样板，您可以用来实现这些到您的网站，如Twitter Bootstrap。
这些可以很容易地集成到web表单、mvc或web页面中，基本上就是您需要使用的全部内容：
Great MSDN Article on Responsive Design
Tutorial on Integrating Twitter Boostrap into ASP.NET Web Forms
Beautify your ASP.NET Application with Twitter Bootstrap
在这里使用框架的主要问题是，您已经设计并运行了站点。当您从项目开发开始就使用这些框架时，它们工作得非常好，但是当您试图将现有项目迁移到使用它们时，它们将需要大量的工作。
这些框架有非常特定的类和样式，实际上它们在响应式设计方面做了很多不同的事情，您必须使用这些新类来基本上替换所有现有的类。这不会是最容易的迁移，但无论如何这肯定不是不可能的，这将是我的建议。
使用CSS Media Queries（如果您想在没有框架的情况下创建这种响应性，这是必要的，但是您需要做更多的工作）
您还可以使用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>

当您调整浏览器/窗口的大小时，将相应地应用这些样式。
<（> aa >）
使用百分比（提供“响应”感觉的另一个选项，但它需要css媒体查询以及真正的“响应”）
您还可以考虑迁移所有内容以使用基于百分比的大小调整，而不是显式的像素大小，但这比实现上述媒体查询更为重要。
这将基本上要求您使用百分比缩放网站上的所有内容，并为项目定义最小和最大高度和宽度。您可能需要将其与媒体查询结合使用，以获得真正有效的解决方案。