Bootstrap 断点视口大小

Question

我正在使用 cropperjs 构建一个多设备裁剪工具。目前我在猜测每个 bootstrap 断点处的视口大小，但我不确定实际高度是多少（因此我可以创建一个比率）。您可以在此处找到网格宽度断点：https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss（第 168-174 行）

总而言之，我正在寻找每个断点处的视口大小：sm, md, lg, xl。我可以研究最常见的设备尺寸（我可能仍然会这样做），但我更喜欢与 bootstrap 的尺寸相关的东西。谢谢。

sm: {
    width: 576px,
    height: ...
}
md: {
    width: 768px,
    height: ...
}
lg: {
    width: 992px,
    height: ...
}
xl: {
    width: 1200px
    height: ...
}

Answer 1

这个问题的最佳选择似乎是使用公比并计算视口高度。包括用户设备的假设。

即

{
    xl: {
        width: 1200,
        height: 1200 * (9/16) // Landscape
    },
    lg: {
        width: 992,
        height: 992 * (9/16) // Landscape
    },
    md: {
        width: 768,
        height: 768 * (3/4) // Landscape
    },
    sm: {
        width: 576,
        height: 576 * (4/3) // Portrait
    }
}

Bootstrap 断点视口大小

Bootstrap breakpoint viewport sizes

javascript

twitter-bootstrap

bootstrap-4

cropperjs