一、适配基础原则

移动端设备屏幕尺寸多样,需遵循以下原则:

  • 使用相对单位:dp/pt而非px,适配不同分辨率
  • 弹性布局:内容区域自适应,而非固定宽度/高度
  • 关键内容优先:小屏幕下优先展示核心功能
  • 测试多设备:至少测试主流尺寸(4.7/6.1/6.7英寸)

二、Android适配技巧

  1. 使用ConstraintLayout:灵活的约束布局,减少层级
  2. 适配不同尺寸文件夹:layout-sw320dp、layout-sw480dp等
  3. 使用dp单位:避免px,自动适配不同密度屏幕
  4. 多语言适配:预留文字扩展空间,避免文字溢出

三、iOS适配技巧

  • AutoLayout自动布局:使用约束定义视图位置关系
  • Size Classes:适配不同尺寸和方向的设备
  • Safe Area:避开刘海屏、底部横条等系统区域
  • Content Mode:设置图片的缩放模式,避免变形

四、跨平台适配技巧

Flutter/uni-app等跨平台框架适配:

  • MediaQuery:获取屏幕尺寸和像素密度
  • Flex布局:弹性布局适配不同屏幕
  • 百分比布局:使用百分比定义视图大小
  • 适配插件:使用社区成熟的适配插件(如flutter_screenutil)