CSS 响应式断点参考
以下是 2026 年主流前端框架和设计系统推荐的断点值。设计断点应基于内容而非特定设备，但这些数值是公认的起点。
类别断点范围目标设备
超小屏 (xs)0 – 479px小屏手机（竖屏）
小屏 (sm)480 – 767px大屏手机（竖屏）
中屏 (md)768 – 1023px平板（竖屏）/ 大屏手机（横屏）
大屏 (lg)1024 – 1439px平板（横屏）/ 笔记本
超大屏 (xl)1440 – 1919px桌面显示器
巨屏 (2xl)1920px+大屏桌面 / 4K
CSS Media Query 示例
/* Mobile-first approach */
@media (min-width: 480px) { /* sm – large phones */ }
@media (min-width: 768px) { /* md – tablets */ }
@media (min-width: 1024px) { /* lg – laptops */ }
@media (min-width: 1440px) { /* xl – desktops */ }
@media (min-width: 1920px) { /* 2xl – large desktops */ }
/* Tailwind CSS v3 defaults */
/* sm:640px md:768px lg:1024px xl:1280px 2xl:1536px */
/* Bootstrap 5 defaults */
/* sm:576px md:768px lg:992px xl:1200px xxl:1400px */
高 DPI 屏幕媒体查询
/* Target high-DPI (Retina) displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.hero-bg {
background-image: url('[email protected]');
}
}
/* Target 3x displays (most modern phones) */
@media (-webkit-min-device-pixel-ratio: 3),
(min-resolution: 288dpi) {
.hero-bg {
background-image: url('[email protected]');
}
}