无需登录 数据私有 本地保存

响应式断点分析器 - CSS媒体查询可视化

12
0
0
0
--
视口宽度
--
视口高度
--
当前断点
--
设备类型
--
设备像素比
--
屏幕方向
断点体系：
点击断点标记可快速设置预览宽度
0px 断点标尺 1400px+
当前: --px
设备预设： 320 375 390 430 768 1024 1366 1440 1920
响应式预览 -- -- px
断点 最小宽度 设备类型 状态
常见问题与知识点

CSS媒体查询是CSS3引入的强大功能，允许开发者根据设备特性（如视口宽度、高度、屏幕分辨率、方向等）来应用不同的样式规则。语法为 @media (条件) { ... }。它是响应式网页设计的核心技术，使同一个网页能在手机、平板、桌面等不同设备上呈现最佳布局。例如 @media (max-width: 768px) { .sidebar { display: none; } } 表示屏幕宽度≤768px时隐藏侧边栏。

Bootstrap 5采用移动优先的断点系统：XS（<576px，手机）、SM（≥576px，大屏手机/小平板）、MD（≥768px，平板）、LG（≥992px，小型桌面/平板横屏）、XL（≥1200px，桌面）、XXL（≥1400px，大屏桌面）。类名如 .col-md-6 表示在MD及以上断点占6列（50%宽度），移动优先意味着基础样式针对最小屏幕，断点样式向上覆盖。

Tailwind CSS同样采用移动优先，但断点值略有不同：sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px）。Tailwind使用前缀修饰符，如 md:flex 表示在md断点及以上应用flex布局。相比Bootstrap，Tailwind的断点更宽泛，sm起点更高（640 vs 576），xl也更宽（1280 vs 1200），适合略微不同的设计策略。

移动优先是一种设计策略，先为最小屏幕（手机）设计布局和样式，然后使用min-width媒体查询逐步为更大屏幕添加或覆盖样式。这与传统的桌面优先（使用max-width逐步降级）相反。移动优先的优势：①强制聚焦核心内容；②减少小屏幕加载不必要的样式；③代码更简洁、更易维护。Bootstrap和Tailwind都采用移动优先策略。

选择断点的最佳实践：①基于内容而非设备——在内容开始显得拥挤或断裂时设置断点；②参考主流框架（Bootstrap/Tailwind）的断点，它们经过大量项目验证；③不要设置过多断点，3-5个通常足够；④使用em/rem单位而非px（更好的可访问性）；⑤测试真实设备，而不仅依赖浏览器模拟。常见策略是保留Bootstrap的576/768/992/1200四个核心断点，按需添加。

视口是浏览器中显示网页的可见区域。移动端浏览器默认会使用一个较宽的虚拟视口（如980px），然后缩小页面以适应屏幕。使用 <meta name="viewport" content="width=device-width, initial-scale=1"> 可以告诉浏览器使用设备的实际宽度作为视口宽度，使CSS媒体查询按预期工作。这是响应式设计的基础配置，缺少它会导致移动端页面显示异常缩小。
🔧 相关工具