网页尺寸规范对照表常见网页元素尺寸标准
常用网页元素尺寸对照表
| 元素 | 推荐尺寸 | 说明 |
|---|---|---|
| Favicon 图标 | 16×16 / 32×32 / 48×48 | 浏览器标签与收藏夹显示，建议同时提供 16 与 32 两个尺寸 |
| Apple Touch 图标 | 180×180 | iOS 添加到主屏时显示的图标 |
| 站点 Logo | 常见 120×60 或按比例 | 位于页头，需保留透明背景并保持缩放清晰 |
| 页头 Banner | 1920×400 或 1440×300 | 全屏大图常用于首页首屏展示 |
| 横幅 / 头部小图 | 336×280 / 250×250 | 常见广告或宣传位标准尺寸 |
| 按钮（尺寸） | 高度 32 / 36 / 40px | 小、中、大按钮，内边距一般为 8～16px |
| 图文封面 | 16:9（如 1280×720） | 文章封面、视频封面常用比例 |
Bootstrap 栅格断点对照表
| 断点名称 | 缩写 | 屏幕宽度范围 | 对应设备 |
|---|---|---|---|
| 超小屏 Extra Small | xs | < 576px | 手机竖屏 |
| 小屏 Small | sm | ≥ 576px | 大屏手机、平板竖屏 |
| 中屏 Medium | md | ≥ 768px | 平板、小笔记本 |
| 大屏 Large | lg | ≥ 992px | 笔记本、桌面显示器 |
| 超大屏 Extra Large | xl | ≥ 1200px | 大尺寸桌面显示器 |
| 超超大屏 XXL | xxl | ≥ 1400px | 超大宽屏显示器 |
常见栅格列宽（容器内）参考
| 容器宽度 | 12 列单列宽 | 说明 |
|---|---|---|
| 576px | 48px | Bootstrap sm 断点容器默认宽 |
| 768px | 64px | Bootstrap md 断点容器默认宽 |
| 992px | ~82px | Bootstrap lg 断点容器默认宽（含左右留白） |
| 1200px | ~99px | Bootstrap xl 断点容器默认宽（含左右留白） |
网页尺寸规范对照表介绍
网页尺寸规范涉及 favicon、Logo、Banner、按钮等多个视觉元素，合理规划元素尺寸可保证页面在不同设备与缩放比例下保持一致与清晰。
▪ Favicon 常需提供 16×16、32×32 等多种尺寸，并以 .ico、.png 或 SVG 格式输出，配合尺寸说明可在标签与收藏夹中呈现清晰图标。
▪ Logo 与 Banner 一般按等比缩放并尽量使用矢量或高清源图，页头 Logo 高约 40～60px 较常见，而全屏 Banner 建议提供 1920px 宽的高清版本。
▪ Bootstrap 栅格以 sm/md/lg 等断点为界，采用 12 列布局，页面开发时应依据断点合理设置列宽与响应式行为，实现良好的多端适配与间距统一。