UD5工具箱
响应式设计（Responsive Design）
响应式设计是一种网页设计方法论，其核心理念是让网站能够根据用户所使用的设备屏幕尺寸和分辨率，自动调整页面布局和样式，从而在所有设备上都能提供最佳的浏览体验。响应式设计最早由Ethan Marcotte于2010年提出，如今已经成为现代网页开发的行业标准。响应式设计的三大核心技术支柱是弹性布局（Flexible Layout）、弹性媒体（Flexible Media）和CSS媒体查询（Media Queries）。通过这三种技术的组合运用，开发者可以创建出能够自适应各种屏幕尺寸的网页。
视口（Viewport）
视口是指用户在设备屏幕上可见的网页区域。在桌面浏览器中，视口通常等于浏览器窗口的内容区域；而在移动设备上，视口的概念更加复杂，包括布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）三个层次。在HTML中，通常通过meta标签中的viewport属性来设置视口的宽度和缩放比例，例如<meta name="viewport" content="width=device-width, initial-scale=1.0">。在响应式测试工具中，视口指的是工具为预览页面分配的iframe容器的像素尺寸，它模拟了目标设备的屏幕分辨率。
媒体查询（Media Queries）
媒体查询是CSS3引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、高度、分辨率、方向等）来应用不同的CSS样式规则。通过媒体查询，开发者可以为不同的屏幕尺寸范围定义不同的布局和样式，从而实现响应式设计。例如，@media (max-width: 768px) { ... }表示当屏幕宽度小于等于768像素时，应用花括号内的样式规则。媒体查询是响应式设计中最重要的技术之一，也是响应式测试工具重点验证的对象。
断点（Breakpoint）
断点是CSS媒体查询中定义的屏幕尺寸临界值，当屏幕尺寸跨过这个临界值时，页面的布局和样式会发生明显的变化。例如，许多网站会设置768px作为手机和平板之间的断点，当屏幕宽度从768px缩小到767px时，页面可能会从多栏布局切换为单栏布局。选择合适的断点位置是响应式设计的关键决策之一，通常需要根据实际使用的设备分辨率分布和内容布局需求来确定。在响应式测试中，开发者需要特别关注断点附近的表现，因为这是最容易出现布局问题的区域。
移动优先（Mobile First）
移动优先是一种响应式设计的开发策略，它主张先为移动设备设计和开发网站的基本样式，然后通过min-width媒体查询逐步为更大的屏幕添加更丰富的布局和功能。这种方法的核心逻辑是：移动设备的屏幕空间有限，开发者必须优先考虑内容的重要性和优先级，精简不必要的元素，确保核心功能在最小的屏幕上也能正常使用。然后，随着屏幕尺寸的增大，可以逐步增加更多的布局元素和装饰性内容。移动优先的设计理念有助于创建更加简洁、高效、加载更快的网站，是当前前端开发社区广泛推荐的最佳实践。
弹性布局（Flexible Layout）
弹性布局是指使用相对单位（如百分比、em、rem、vw、vh等）而非绝对单位（如像素px）来定义页面元素的尺寸和间距的布局方式。弹性布局使页面元素能够根据父容器或视口的大小自动伸缩，从而适应不同的屏幕尺寸。现代CSS中的Flexbox和Grid布局模块是实现弹性布局的两大核心技术，它们提供了强大而灵活的布局能力，使开发者能够轻松创建复杂的自适应布局。
设备像素比（Device Pixel Ratio, DPR）
设备像素比是设备物理像素与CSS像素之间的比值。例如，Retina显示屏的DPR通常为2或3，这意味着每个CSS像素实际上由4个或9个物理像素来渲染，从而提供更清晰的视觉效果。在响应式测试中，了解DPR的概念很重要，因为同样CSS像素尺寸的元素在不同DPR的设备上会呈现出不同的清晰度。响应式测试工具主要模拟CSS像素级别的视口尺寸，帮助开发者验证布局适配，但无法完全模拟高DPR设备的渲染效果。