优质的排版能提升公众号文章阅读体验和转发率。本文分享适合公众号的HTML/CSS排版技巧,兼容各版本微信客户端。

1. 基础样式重置

使用通配符清除默认边距,设置统一字体和行高:*{margin:0;padding:0;} body{font-family:"PingFang SC","Helvetica Neue",sans-serif;line-height:1.75;}

2. 响应式图片处理

图片宽度设置为100%,高度自适应,避免超出屏幕:img{max-width:100%!important;height:auto;display:block;margin:1em auto;}

3. 标题样式设计

为不同级别标题设置差异化样式,使用padding而非margin避免微信编辑器吞样式:h2{padding:1em 0 0.5em;border-bottom:1px solid #eee;}

4. 列表与引用样式

自定义列表符号和引用样式,增强内容层次感:blockquote{padding:1em;background:#f5f5f5;border-left:4px solid #07c;}

5. 兼容性处理

避免使用flex布局等微信不兼容的CSS属性,关键样式添加!important提升优先级。