屏幕适配对比

如何对比图片布局

1. 选择、拖入或粘贴一张静态 JPEG、PNG 或 WebP 图片。
2. 调节屏幕宽度，选择固定框高或宽高比；两栏使用相同的边距、位置和背景。
3. 查看原图范围示意与保留比例，生成真实 PNG，把布局条件一起发给设计。

图片像素、文件体积和布局是三个概念

800×400 图片的原始比例是 2:1，但页面可以把它放进 390×240 CSS 像素的框：contain 完整显示并留白，cover 铺满框并裁掉两侧。KB 表示编码后的文件字节数，减小 KB 本身不会改变 CSS 布局。

屏幕宽度是明确声明的 CSS 视口条件，不代表某款手机、DPR、物理尺寸或完整浏览器仿真。显示缩放仅让画面适应工作台，并单独标注。留白只计绘制图像外的区域，不把原图透明像素计作留白。可见区域可能有小数坐标，它表示几何取样范围，不是整数像素裁剪。

明确条件的本地对比

单张静态 JPEG／PNG／WebP，上限 15MB、16MP、单边 8192px。屏幕宽 200–1440 CSS px，框高 32–4096；宽高比两项为 1–8192 整数，计算高度四舍五入为整数。每侧边距 0–96，框宽至少 32px；位置为 0–100%。

PNG 包含两栏布局、固定标注、数值几何和明确不透明背景。一个 CSS 像素对应一个输出像素，不复制输入文件名或元数据。输出上限 16MP、单边 8192px、50MB，并设 45 秒检查点。图片模式不上传、不请求远程图片，也不持久保存图片。

网页地址

加载会让浏览器连接目标网站；网站可能收到 Cookie 并加载其它资源。地址只留在本页，不进入统计。

部分网站禁止嵌入。受限预览不支持登录、提交表单、弹窗或网页截图；只调整视口尺寸，不改变浏览器身份或设备能力。

调整设备尺寸查看响应式布局；显示缩放只改变工作区视图。

常见问题