万科网络科技

1. 页面横幅 / 轮播图（Banner）

   主流移动设备的屏幕宽度集中在 360px - 414px 之间，横幅图的宽度建议设置为 375px（适配 iPhone 系列）、414px（适配大屏安卓），高度根据设计需求控制在 200px - 400px 即可。

   响应式设计中，可设置最大宽度为 100%，高度自适应，避免图片拉伸变形。
2. 产品 / 内容缩略图
   • 列表类缩略图：宽度 80px - 120px，高度 80px - 120px（方形）或 100px - 150px（矩形），适合商品列表、文章列表。
   • 网格类缩略图：宽度 160px - 180px，高度 200px - 250px，适合相册、商品陈列页。
3. 图标 / 按钮图片

   移动端图标建议使用 SVG 矢量格式（可无损缩放），如果用位图（PNG/JPG），尺寸参考：
   • 小图标（功能入口）：24px×24px、32px×32px
   • 按钮背景图：宽度与按钮一致（80px - 150px），高度 36px - 48px，保证文字和图案清晰。
4. 背景图

   移动端背景图建议采用 平铺（repeat） 或 自适应拉伸（cover） 模式，尺寸上推荐 750px×1334px（适配大多数手机的宽高比），同时压缩图片体积，避免影响加载速度。
5. 高清图标准

   为了适配 Retina 屏（高清屏），图片的实际像素尺寸建议是显示尺寸的 2 倍（@2x），部分高端设备可采用 3 倍尺寸（@3x）。

   例如：要显示 100px×100px 的图片，实际制作尺寸应为 200px×200px（@2x）或 300px×300px（@3x），这样在高清屏上不会模糊。

额外注意事项

• 图片格式：图标用 PNG（透明背景），照片用 JPG（压缩率高），简单图形用 SVG（矢量），动图用 WebP（体积更小，兼容性好）。
• 响应式适配：通过 CSS 的 srcset 属性，为不同屏幕宽度提供不同尺寸的图片，实现 “按需加载”。