1. 不同行业的行高设置要点
1) 以行业特性驱动的排版需求
在电子商务行业，产品文本与图片信息并重，行高关注点是确保文字不拥挤且对比清晰，以提升点击率和转化率。
在新闻媒体场景，可读性与信息密度需要平衡，合适的行高能帮助读者快速浏览长文本。
在教育与培训领域，段落的可读性直接影响学习效果，推荐稍高一些的行高。
在金融/银行等行业，复杂信息结构下的行高需要确保关键字句易于区分，同时防止跨行错位导致信息误读。
2) 中文排版的行高优化要点
中文文本对垂直行距的容忍度较高，尽量使用单位无关的数值如 1.5、1.6，便于在不同字号间的自适应。
结合字体特性，若使用中等字号，可参考 1.4-1.8 的范围来设计基础行高。
另外，行高应与字体大小成比例，以保持整页面的视觉节奏。
在政府门户与医疗等领域，统一的行高有助于提升公文式页面的专业感和可读性，确保信息层次清晰。
3) 面向不同行业的排版策略整合
综合行业需求，应建立一个可复用的行高体系，在不同页面和组件之间实现风格一致。
通过对比场景，为卡片、列表、表格等模块设定专属行高，确保整体阅读体验的连贯性。
最后，在高密信息页面适度放大行高，以缓解段落间的视觉疲劳。
2. 前端设计师的实操要点
1) 单位与数值的选择
使用单位无关的 line-height（如 1.5），可以在不同字体大小下保持一致的视觉效果，避免跨浏览器偏差。
如果需要绝对高/低密度的文本，可以用单位 px 或 rem，但 推荐优先使用无单位的数值，以实现缩放友好性。
建议不要把 line-height 与 font-size 的单位混用；单位解耦提高维护性，便于主题切换与响应式布局。
2) 设定全局基线与局部覆盖
通过根变量设定全局 base line-height，并在需要的组件中覆盖，避免在同一页面出现冲突。
使用 CSS 变量和层级的方式，可以对不同场景进行快速切换，如卡片、表格、列表等区域，确保视觉节奏统一。
3) 响应式和断点设计
在移动端，字形变化和行高需求不同，需要通过媒体查询动态调整行高。
示例：当屏幕宽度小于 768px 时，将行高调整为 1.55，以适应小屏视觉。
3. 代码实现与可访问性优化
1) CSS 变量和混入
将行高抽象成变量，方便跨项目复用，也便于主题切换。
通过 SASS/LESS 的混入实现同类组件行高的统一管理，提升开发效率与一致性。
:root {--lh-base: 1.5;--lh-product: 1.6;--lh-news: 1.5;
}
body { line-height: var(--lh-base); }/* 示例：区域覆盖 */
.product-card { line-height: var(--lh-product); }
.news-article { line-height: var(--lh-news); }2) 媒体查询示例
响应式设计中，断点管理是关键，要在不同屏幕上保持一致的阅读体验。
@media (max-width: 768px) {html { font-size: 16px; }body { line-height: 1.55; }
}
@media (min-width: 1200px) {html { font-size: 18px; }body { line-height: 1.6; }3) 可访问性与可读性
对于屏幕阅读器用户，行高应避免过小，否则难以区分段落边界，尽量保持至少 1.4 的基线。
同时，高对比度和适度行高能降低认知负担，提升页面可访问性评分。
