css - MVC razor 获取 div 宽度并检查条件

Question

我有一个应该响应的 View 。我的模型有两个属性 leftPosition 和 topPosition。现在我想如果我的外部 div 的宽度小于 714，topPosition 和 leftPosition 设置为 0，否则它们将具有以下值他们从模型中接收到。但是如何检查 mvc razor 语法中的外部 div 宽度。我尝试使用 javascript 并设置 mvc razor 变量，但我发现它不可能做这样的事情，因为 asp.net 是服务器端和 javascript是客户端。

mvc 局部 View

@foreach (var item in Model)
{
    if (Request.Browser.ScreenPixelsWidth < 1000)
     {
        {item.TopPosition = 0;}
         {item.LeftPosition = 0;}
     }
      Html.RenderPartial(@item.TileName, @item);
    }

而不是这个 Request.Browser.ScreenPixelsWidth 我想使用类似 ("#desktopTilesContiner").Width 的东西，我可以在我的 if 条件中使用它。在我的图像中我有不同的图 block - 实验室，病理学，程序，药物.这些是根据它们的顶部和左侧位置设置的，但在移动设备上我只想让它们排在一列中而忽略它们的顶部和左侧位置。类似于图二。

Answer 1

你的 Request.Browser.ScreenPixelsWidth < 1000可以用 css 媒体查询来处理，像这样:

@media all and (max-width: 1000px) { *content here* }

我还建议不要使用 position: absolute (因此不需要整个顶部/左侧定位)并让 DOM 元素自然流动。