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

【问题标题】：Set minimum width for desktop layout only仅为桌面布局设置最小宽度
【发布时间】：2013-06-25 16:59:56
【问题描述】：

我正在尝试使用 Twitter 引导程序创建响应式设计。一切顺利，但我不知道如何为桌面用户设置最小宽度。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

要复制 logicvault.com 网站的工作方式，您需要更改 Bootstrap CSS，以便您只有一个以 480 像素启动的媒体查询。

这是他们设置的媒体查询：

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

【讨论】：

【解决方案3】：

通过使用 Frederic 的建议，我能够实现此功能：

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

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

例如改变：

@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
    }

【讨论】：