javascript - 引导断点视口大小

Question

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

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

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

标签： javascripttwitter-bootstrapbootstrap-4cropperjs

Answer 1

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

IE

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