Question

我的方案是

如果宽度超过1024px，我希望我的应用能够做出响应。

如果用户正在使用浏览器，并且他的命中率低于1024px，我希望该应用无响应且需要水平滚动条。

我尝试将min-width放在body标签中，并且在1024px以下仍然响应。

我该怎么做？

<body style="min-width: 1300px">
<div class="navbar navbar-fixed-top" style="background-color: #f5f5f5">
    <div class="row">
        <div class="navbar-header col-md-4">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>

            <div class="col-md-2 text-center">
              <b>Hello</b>
            </div>
            <div class="col-md-2 text-center">
               <b>Hello</b>
            </div>
            <div class="col-md-2 text-center">
               <b>Hello</b>
            </div>
            <div class="col-md-2 text-center">
                <b>Hello</b>
            </div>
        </div>

</div>

@RenderBody（）

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Answer 1

将以下内容添加到您的body代码中。

当内容溢出包含它的元素时，溢出自动会将滚动条添加到页面。

body {
    min-width: 1024px;
    overflow: auto;
}

Answer 2

网站有多种方式可以做出响应。解决方案将取决于库使用的技术。

最简单的方法是你可以像这样在你的css body标签中添加一个min-width属性：

body {
  min-width : 1024px;
}

但是当图书馆使用@media查询时，这种方法不起作用。在这种情况下，您需要覆盖css中的那些。只需在身体标记之前添加@media。

@media (max-width: 1024px) {
  body {
    min-width:1024px;
  }
}
@media (max-width: 990px) {
  body {
    min-width:990px;
  }
}

媒体查询会根据您浏览器的当前分辨率调整网站。

无响应的引导程序设计

2 个答案: