网页设计关键适配技巧解决90%的适配问题

移动端布局的最大痛点是碎片化机型适配，技巧能低成本解决适配问题，屏幕尺寸适配核心采用相对单位而非固定像素，字体、用

sp、安卓iOS、避免用px不同分辨率下显示不一致，间距尺寸用百分比或安卓iOS，导航栏高度设为屏幕高度的8%，固定核心模块

尺寸按钮高度固定48dp，触控区域最小48×48dp符合人机工程学，适配主流屏幕比例：16:9、18:9、20:9主流全面屏，避免内容被

刘海屏挖孔屏遮挡预留安全区。

安卓iOS布局规范差异避坑关键，设计项iOS规范安卓规范统一适配技巧，导航栏高度44pt普通/50pt刘海屏，48dp普通/56dp刘海

屏取中间值50dp/pt，或按平台自适应核心按钮位置统一，不随导航栏高度偏移底部操作栏 无安全区，紧贴底部需预留虚拟导航键

安全区≥32dp，底部栏高度iOS安卓保证内容不被遮挡，用安全区适配工具自动计算预留空间，圆角风格、圆角偏大、圆角适中、

统一圆角兼顾双平台审美。

横竖屏适配核心原则横屏仅扩展内容宽度，不改变核心布局结构，表单页竖屏上下排列的表单项，横屏可左右分栏但不超过2列，详

情页横屏时图片文字占比扩大，核心按钮仍固定在底部，禁止横屏功能缺失竖屏有提交按钮，横屏必须保留且位置易触及。

暗黑模式适配布局结构完全不变，仅调整颜色对比度文字暗黑模式下用浅灰色（#E0E0E0），避免纯白刺眼按钮深色背景浅色文字，

如#333333背景+#FFFFFF文字，卡片暗黑模式下卡片背景#222222，与主背景#121212区分开。