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

Question

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

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

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

通过使用 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
    }

3 回答 3