桌面和移动设备的样式视图不同 | asp.net 核心 2 mvc 5

Question

所以我一直在使用 mvc 5 在 asp.net core 2 中开发 c# / razor web 应用程序并且相处得很好，但现在我需要制作一个能够进行响应式设计的新网站。

我基本上只需要根据用户使用的设备更改我的视图及其 css。我已经在使用 bootstrap 了，它已经完成了部分工作，但我只想改变我的视图样式。

我已经完成了很多教程，但所有教程都不在 asp.net 核心 2 中，并且使用 BundleConfigs 等。我还没有为我的框架和版本找到教程或模板。

这基本上只是我正在寻找的东西，只是伪代码：这应该是完整视图的示例。所以显然不是每个按钮的 if else。

if(device==mobile){
<a class="btn btn-sm">Link</a>
}
else{
<a class="btn btn-lg">Link</a>
}

我知道这不是 Whosebug 的完美问题，因为我只是在寻求帮助，我很抱歉，但我只是在寻找小帮助或链接的 turtorial 或其他东西。

Answer 1

Bootstrap 的重点是它完全专注于响应式设计并在某些断点（屏幕宽度；超大/xl 和大/lg 显示器（例如 27" Apple Thunderbolt）使用全宽浏览器）、medium / md（13 英寸笔记本电脑 window）、small /sm（ipad）和 xtra small / xs（iphone）。

因此绝对没有必要在您的 cshtml 中使用 if/else 结构，永远不要。您可以使用所有这些响应式类后缀来配置您的布局，例如：-xl、-lg、-md、-sm 和 -xs 以及 Bootstrap（媒体查询）为您完成剩下的工作根据页面显示的 window 大小。

对于您的示例，您可以这样做：

<a class="btn btn-sm d-sm-none">Link</a>
<a class="btn btn-lg d-none d-sm-inline-block">Link</a>

第一个锚点显示的宽度为 window 页面显示小于 sm 且大于等于 sm 它是隐藏的 (d-sm-none)。第二个锚标记隐藏 "by default" (d-none) 并从 sm 断点及以上 (sm, md, lg, xl) 显示。如需进一步参考，请检查此 Bootstrap page.

因此无需在您的 cshtml 中进行繁琐的 if / else 构造。

桌面和移动设备的样式视图不同 | asp.net 核心 2 mvc 5

Style View diffrent for Desktop and Mobile | asp.net core 2 mvc5

c#

responsive