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

本文由清尘发表于2021-04-01 17:19最后修改于2021-04-20属于HTML/CSS分类
/* 超小屏幕(手机,小于 768px) */

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

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

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

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

Bootstrap默认断点

断点 规格 屏幕尺寸大小
超小(X-Small) <576px
小(Small) sm ≥576px
中(Medium) md ≥768px
大(Large) lg ≥992px
超大(Extra large) xl ≥1200px
超大型(Extra extra large) xxl ≥1400px

媒体查询 最小宽度

// 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();