网站制作 招聘,店铺设计效果图店面,网站建设汕头,摄影网站模板html文章目录 前言✅ 一、核心适配方式对比#x1f4cf; 二、rpx 单位#xff1a;uni-app 的核心适配机制#x1f9f1; 三、默认设计稿适配#xff08;750宽#xff09;#x1f501; 四、字体 屏幕密度适配#x1f6e0; 五、特殊平台适配#xff08;底部安全区、刘海… 文章目录 前言✅ 一、核心适配方式对比 二、rpx 单位uni-app 的核心适配机制 三、默认设计稿适配750宽 四、字体 屏幕密度适配 五、特殊平台适配底部安全区、刘海屏 六、调试建议 七、总结uni-app 的屏幕适配优势 前言
uni-app 相比普通 H5 页面在适配多终端屏幕方面做了大量工作目标是让同一套代码在 App、小程序、H5 等多平台上视觉一致、布局准确、交互无误。 ✅ 一、核心适配方式对比
维度普通 H5 页面uni-app单位体系px, rem, %, vw/vh 等统一使用 rpx响应像素设计稿基准通常 750px 或 375px需手动适配默认设计稿以 750px 宽度为基准屏幕适配机制开发者手动设置 viewport 和 media query编译时自动转换 rpx → 实际像素各端自适应多端兼容性需针对不同终端编写样式各端运行时会自动渲染为适配单位如 App、小程序自动转换字体缩放问题需要 JS 控制或媒体查询自动处理大字体模式小程序和字体缩放App兼容性 二、rpx 单位uni-app 的核心适配机制 rpx responsive pixel响应式像素 自动根据屏幕宽度进行缩放 在 750px 设计稿下屏幕宽度为 750rpx自动适配到任意设备设备宽为 375pxiPhone 6/7/8则 1rpx 0.5px 编译时转换为各平台的对应单位 小程序平台 → 微信原生 rpxH5 → 转换为 vwApp → 转换为 px dpr 缩放 你写一次width: 375rpx在所有平台都能保持相同视觉宽度 三、默认设计稿适配750宽
大多数组件、模板、样式都是以 750px 宽设计稿为基准若你的设计稿是 375px 宽也可以通过工具将其转为 750 再开发rpx 只关注相对宽度不必手动设置媒体查询或 DPR 缩放 四、字体 屏幕密度适配
小程序字体缩放兼容rpx 会自动缩放不需要额外处理App 字体缩放兼容uni-app 已处理系统字体缩放问题不建议使用 px 单位定义字体否则在高 DPI 设备上易出现大小不一 五、特殊平台适配底部安全区、刘海屏
uni-app 提供了多平台兼容性处理
问题解决方式iPhone X 底部安全区使用 safe-area-inset-bottom或 H5 中使用 padding-bottom: constant(safe-area-inset-bottom)状态栏高度通过 uni.getSystemInfoSync() 获取 statusBarHeight刘海屏/圆角屏App 和小程序平台会自动适配 padding 区域建议使用 view 包裹避免遮挡 六、调试建议
推荐设计稿基准宽度750px使用 HBuilderX 或 微信开发者工具 来真实还原 rpx 效果避免写死 px 布局否则会在高分屏上过小 七、总结uni-app 的屏幕适配优势
优势描述✅ rpx 统一单位一套代码兼容所有屏幕密度和平台✅ 编译阶段处理无需手动编写媒体查询或动态 JS 控制✅ 多端兼容性强H5、小程序、App 统一视觉表现✅ 安全区处理完善App/iOS/小程序常见异形屏已内建支持
