响应式排版需要兼顾不同屏幕尺寸下文字的可读性与页面布局的协调性，媒体查询可以根据设备尺寸触发样式变更，工具类则能实现样式的快速复用，两者结合能大幅降低响应式排版的开发成本。
媒体查询与工具类的基础作用
媒体查询的核心价值
媒体查询是CSS原生的响应式能力，通过判断设备的宽度、分辨率等特征，为不同场景应用不同的样式规则。在排版场景中，我们常用它来设置不同断点下的根字体大小，从而让所有基于rem单位的排版属性自动适配。
常见的响应式断点设置如下：
- 小屏设备：宽度小于768px
- 中屏设备：宽度在768px到1024px之间
- 大屏设备：宽度大于1024px
工具类的优势
工具类是CSS框架中预定义的小粒度样式类，比如text-sm表示小号文字，leading-loose表示宽松行高。开发者可以直接在HTML元素上添加对应的类，无需手动编写重复的CSS代码，大幅提升开发效率。
两者结合的实现思路
第一步：定义基础响应式断点
首先通过媒体查询设置不同断点下的根字体大小，作为rem单位的计算基准：
/* 基础根字体大小，对应小屏设备 */
html {
font-size: 14px;
}
/* 中屏设备断点 */
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
/* 大屏设备断点 */
@media (min-width: 1024px) {
html {
font-size: 18px;
}
}
第二步：封装排版相关的工具类
基于设置好的根字体基准，封装不同场景的排版工具类，覆盖文字大小、行高、字间距等常用属性：
/* 文字大小工具类 */
.text-base {
font-size: 1rem; /* 对应根字体大小 */
}
.text-sm {
font-size: 0.875rem;
}
.text-lg {
font-size: 1.125rem;
}
/* 行高工具类 */
.leading-normal {
line-height: 1.5;
}
.leading-loose {
line-height: 1.8;
}
/* 字间距工具类 */
.tracking-wide {
letter-spacing: 0.05em;
}
第三步：结合媒体查询生成响应式工具类
如果需要某些工具类只在特定断点下生效，可以结合媒体查询生成带断点前缀的工具类，比如中屏及以上才生效的大号文字类：
/* 中屏及以上生效的文字大小工具类 */
@media (min-width: 768px) {
.md_text-lg {
font-size: 1.125rem;
}
.md_leading-loose {
line-height: 1.8;
}
}
/* 大屏及以上生效的文字大小工具类 */
@media (min-width: 1024px) {
.lg_text-xl {
font-size: 1.25rem;
}
}
实际使用示例
在HTML中可以直接组合使用基础工具类和响应式工具类，实现不同屏幕尺寸下的排版适配：
<div class="text-base leading-normal md_text-lg md_leading-loose lg_text-xl"> 这是一段响应式排版的示例文本，在小屏设备上显示基础大小，中屏设备行高更宽松、文字稍大，大屏设备文字进一步放大，保证不同屏幕下的可读性。 </div>
实践注意事项
- 断点设置要符合项目的目标用户设备分布，不要盲目照搬通用断点
- 工具类的命名要保持统一规范，方便团队协同开发
- 避免过度封装工具类，只保留高频使用的排版属性，减少CSS文件体积
- 测试时要覆盖主流尺寸的手机、平板、桌面设备，确保排版效果符合预期
响应式排版的核心是平衡可读性和开发效率，媒体查询负责底层适配逻辑，工具类负责上层快速复用，两者结合能让排版代码更简洁、更易维护。