优质的排版能提升公众号文章阅读体验和转发率。本文分享适合公众号的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提升优先级。