媒体查询、响应式常用断点

/* 超小屏幕（手机，小于 768px） */

@media (max-width: 576) { ... }

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200) { ... }

Bootstrap默认断点

媒体查询 最小宽度

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

最大宽度

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

单个断点:用于最小和最大断点宽度来定位屏幕大小的单一段。

@media (min-width: 768px) and (max-width: 991.98px) { ... }

断点之间：媒体查询可能跨越多个断点宽度

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

如果是js部分可以使用屏幕宽度进行判断

var winWidth = $(window).width();