将 MVC 网站转换为响应式
Convert MVC Website to be Responsive
在调查与没有移动网站有关的 Google SEO 问题时。我最近了解到，缺乏合适的移动网站会降低搜索评级，而且移动网站和桌面网站的不同内容也可能会损害您的 SEO。
目前我们有一个 MVC 网站，它不是为响应式设计的。我不想创建需要更多维护的东西。 （IE 新移动站点或为移动版本创建新视图..）。
我了解到，将站点转换为响应式站点在技术上是可行的，但不推荐这样做，原因有以下两个：
- 当前站点在小屏幕上可能无法正常工作。（CSS 问题，修改 CSS 可能会很痛苦且有风险）。
- 当前站点上的内容太多。
在谷歌搜索时，我发现这是最好的方法。
对桌面和移动浏览器使用相同的控制器和视图，但根据设备类型使用不同的 Razor 布局呈现视图。此选项需要新的 CSS 和移动设备的新 _Layout 页面。
然后修改 _ViewStart 为
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";
我想继续采用上述方法，但如果有人在这方面有任何经验，我想知道实现此目的的最佳实践、推荐方法和技术可能性。
ASP.NET MVC 应用程序默认使用 Bootstrap 响应。
处理响应式设计通常有三种方法：
使用响应式设计框架
使用 CSS 媒体查询
使用百分比
使用其中每一个的难易程度最终将取决于您现有项目的复杂程度以及您愿意做多少和改变以使其响应。
考虑响应式设计框架（基本上是修改和更新现有项目的所有标记）
这将允许您的网站或应用程序 运行 在基本上任何设备上（并且这样做看起来不错），无论平台如何，只要它有一个互联网浏览器可以访问它并且将使它更容易开发，因为您只需要在一个区域内创建您的页面，而响应式设计的美妙之处在于它会根据当前的平台和设备适当地设置您的页面样式。
它并不是真正自动的，您可能需要稍微修改一下才能让一切正常工作并看起来像它应该的那样，但这可能是处理这种情况的最佳方法（取决于您正在使用的控件）。您可以使用响应式设计框架和样板将它们实施到您的站点中，例如 Twitter Bootstrap.
这些可以很容易地集成到 Web 窗体、MVC 或网页中，基本上就是您需要使用的所有内容：
在此处使用框架的主要问题是您已经设计并启动了您的网站，并且 运行ning。当您从项目开发的一开始就使用这些框架时，它们工作得非常好，但是当尝试迁移现有项目以使用它们时，它们将需要大量的工作。
这些框架具有非常具体的 类 和样式，它们实际上在响应式设计方面做了很多不同的事情，您将不得不使用这些新的 类 来基本上替换所有现有的.这不会是最简单的迁移，但无论如何都不是不可能的，这将是我的建议。
使用CSS Media Queries（如果你想在没有框架的情况下处理创建这种响应性，这是必要的，但你需要做更多的工作）
您也可以使用 CSS 媒体查询来完成此操作，该查询针对特定的分辨率和屏幕尺寸以及相应的样式元素，但是这有点手动，您必须为每种尺寸编写查询您的目标。
与使用框架相比，这些将需要更多的工作，因为您必须编写查询以针对您想要的所有不同的主要分辨率，然后在每个这些分辨率中手动调整一些元素的大小。您基本上必须为每个要定位的分辨率创建一个迷你样式表或媒体查询，然后手动输入要用于该特定分辨率的值。
我以前做过更多 "hands-on" 形式的响应式设计，但是让一些经过尝试和证明的东西像一个框架为你处理它要容易得多。查看下面的非常简单的示例，该示例将演示 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>
并且当您调整浏览器大小时/window，样式将相应应用。
使用百分比（另一种提供 "responsive" 感觉的选项，但它还需要 CSS 媒体查询才能真正 "responsive"）
您也可以考虑迁移所有内容以使用基于百分比的大小调整而不是明确的像素大小，但这比实施上述媒体查询还要工作。
这基本上要求您使用百分比缩放网站上的所有内容，并定义项目的最小和最大高度和宽度。您可能必须将其与媒体查询结合使用才能获得真正有效的解决方案。
在调查与没有移动网站有关的 Google SEO 问题时。我最近了解到，缺乏合适的移动网站会降低搜索评级，而且移动网站和桌面网站的不同内容也可能会损害您的 SEO。
目前我们有一个 MVC 网站，它不是为响应式设计的。我不想创建需要更多维护的东西。 （IE 新移动站点或为移动版本创建新视图..）。
我了解到，将站点转换为响应式站点在技术上是可行的，但不推荐这样做，原因有以下两个：
- 当前站点在小屏幕上可能无法正常工作。（CSS 问题，修改 CSS 可能会很痛苦且有风险）。
- 当前站点上的内容太多。
在谷歌搜索时，我发现这是最好的方法。
对桌面和移动浏览器使用相同的控制器和视图，但根据设备类型使用不同的 Razor 布局呈现视图。此选项需要新的 CSS 和移动设备的新 _Layout 页面。
然后修改 _ViewStart 为
Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" :"~/Views/Shared/_Layout.cshtml";
我想继续采用上述方法，但如果有人在这方面有任何经验，我想知道实现此目的的最佳实践、推荐方法和技术可能性。
ASP.NET MVC 应用程序默认使用 Bootstrap 响应。
处理响应式设计通常有三种方法：
使用响应式设计框架
使用 CSS 媒体查询
使用百分比
使用其中每一个的难易程度最终将取决于您现有项目的复杂程度以及您愿意做多少和改变以使其响应。
考虑响应式设计框架（基本上是修改和更新现有项目的所有标记）
这将允许您的网站或应用程序 运行 在基本上任何设备上（并且这样做看起来不错），无论平台如何，只要它有一个互联网浏览器可以访问它并且将使它更容易开发，因为您只需要在一个区域内创建您的页面，而响应式设计的美妙之处在于它会根据当前的平台和设备适当地设置您的页面样式。
它并不是真正自动的，您可能需要稍微修改一下才能让一切正常工作并看起来像它应该的那样，但这可能是处理这种情况的最佳方法（取决于您正在使用的控件）。您可以使用响应式设计框架和样板将它们实施到您的站点中，例如 Twitter Bootstrap.
这些可以很容易地集成到 Web 窗体、MVC 或网页中，基本上就是您需要使用的所有内容：
在此处使用框架的主要问题是您已经设计并启动了您的网站，并且 运行ning。当您从项目开发的一开始就使用这些框架时，它们工作得非常好，但是当尝试迁移现有项目以使用它们时，它们将需要大量的工作。
这些框架具有非常具体的 类 和样式，它们实际上在响应式设计方面做了很多不同的事情，您将不得不使用这些新的 类 来基本上替换所有现有的.这不会是最简单的迁移，但无论如何都不是不可能的，这将是我的建议。
使用CSS Media Queries（如果你想在没有框架的情况下处理创建这种响应性，这是必要的，但你需要做更多的工作）
您也可以使用 CSS 媒体查询来完成此操作，该查询针对特定的分辨率和屏幕尺寸以及相应的样式元素，但是这有点手动，您必须为每种尺寸编写查询您的目标。
与使用框架相比，这些将需要更多的工作，因为您必须编写查询以针对您想要的所有不同的主要分辨率，然后在每个这些分辨率中手动调整一些元素的大小。您基本上必须为每个要定位的分辨率创建一个迷你样式表或媒体查询，然后手动输入要用于该特定分辨率的值。
我以前做过更多 "hands-on" 形式的响应式设计，但是让一些经过尝试和证明的东西像一个框架为你处理它要容易得多。查看下面的非常简单的示例，该示例将演示 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>
并且当您调整浏览器大小时/window，样式将相应应用。
使用百分比（另一种提供 "responsive" 感觉的选项，但它还需要 CSS 媒体查询才能真正 "responsive"）
您也可以考虑迁移所有内容以使用基于百分比的大小调整而不是明确的像素大小，但这比实施上述媒体查询还要工作。
这基本上要求您使用百分比缩放网站上的所有内容，并定义项目的最小和最大高度和宽度。您可能必须将其与媒体查询结合使用才能获得真正有效的解决方案。