仅为桌面布局设置最小宽度

Question

我正在尝试使用Twitter引导创建响应式设计。一切进展顺利，但我无法弄清楚如何为桌面用户设置最小宽度。

当用户在桌面上时，我不希望他们能够将浏览器缩小到他们看到针对手机的响应功能的位置（例如导航栏移动按钮）。当浏览器变得太小时，我宁愿只有一个水平滚动条。如何在不影响移动布局的情况下获得此功能？

Answer 1

您可以使用媒体查询解决此问题。唯一的问题是你必须为此设置一个固定的width，min-width在这种情况下似乎不起作用（在Firefox和Chrome中测试过）。如果这对您没问题，您可以尝试以下示例：

// Should be something > 1024
@media only screen and (min-device-width: 1300px) {
    body {
        width: 1300px;
    }
}

Answer 2

要复制logicvault.com使其网站正常工作的方式，您需要更改Bootstrap CSS，以便只有一个媒体查询以480px开始。

以下是他们设置的媒体查询：

@media only screen and (max-width: 480px){
    // styles here
}

Answer 3

我能够通过使用弗雷德里克的建议来实现这一功能：

// Should be something > 1024
@media only screen and (min-device-width: 1024px) {
    body {
        min-width: 1025px;
    }
}

但是，我还需要调整引导响应文件，以便样式仅应用于触摸设备。我最终在我的页面上包括Modernizr并寻找触摸类。

E.g。改变：

@media (min-width: 768px) and (max-width: 979px) {
    // Styles are here
}

为：

@media (device-min-width: 768px) and (device-max-width: 979px) {

    .touch {
        // Styles go here
    }