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断点视口大小

1 个答案: