摘要：在移动端网站建设中，尺寸设计需兼顾不同设备的屏幕分辨率和适配性，以下是关键要点： 一、视口（Viewport）设置必须添加：`` 确保页面宽度与设备宽度一致，禁止默认缩放。 二、设计稿参考尺寸1. 常见基准尺寸 - 以 iPh...

在移动端网站建设中，尺寸设计需兼顾不同设备的屏幕分辨率和适配性，以下是关键要点：

一、视口（Viewport）设置

必须添加：``

确保页面宽度与设备宽度一致，禁止默认缩放。

二、设计稿参考尺寸

1. 常见基准尺寸

- 以 iPhone 6/7/8（375×667px） 或 iPhone X/12/13（390×844px） 为设计原型。

- Android 推荐 360×640px（如中低端机型）。

2. 响应式设计

- 使用 相对单位（rem、vw/vh、%） 替代固定像素（px）。

- 栅格系统建议 12列 灵活布局。

三、适案

媒体查询（Media Queries）

根据不同分辨率断点调整样式，例如：

css

@media (max-width: 480px) { /* 小屏手机样式 */ }

@media (min-width: 768px) { /* 平板样式 */ }

弹性布局（Flexbox） + 网格布局（Grid）

实现元素自适应排列。

四、元素尺寸规范

1. 点击区域 ≥ 48×48px（避免误触）

2. 字体大小

- 正文建议 14-16px（最小不小于12px）。

- 标题根据层级递增（如18px/22px/26px）。

3. 边距与间距

- 模块间距建议 15-20px，内间距 10-15px。

五、高清屏（Retina）适配

2倍图/3倍图：针对高分辨率设备提供@2x、@3x图片资源。

CSS使用rem/vw：结合`device-pixel-ratio`媒体查询。

六、注意事项

横屏适配：通过CSS检测横屏（`@media (orientation: landscape)`）。

安全区域：避开iPhone刘海和底部黑条（使用`env(safe-area-inset-*)`）。

七、主流设备分辨率参考

| 设备类型 | 逻辑分辨率（CSS像素） | 物理分辨率（实际像素） |

|------------------|----------------------|-----------------------|

| iPhone 14 Pro | 393×852pt | 1179×2556px (@3x) |

| 华为 Mate 50 | 360×780px | 1080×2340px (@3x) |

| iPad Mini | 768×1024px | 1536×2048px (@2x) |

建议使用 移动优先（Mobile First） 策略设计，并通过真机测试确保兼容性。