uniapp尺寸适配的一些记录

最新推荐文章于 2024-11-17 09:20:06 发布
最新推荐文章于 2024-11-17 09:20:06 发布
阅读量1w 收藏 16
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 微信小程序开发记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010513497/article/details/103601955
本文详细解析了uni-app中的尺寸适配技巧，包括如何根据设计稿尺寸转换为rpx单位，以及在不同设备和平台（如web和小程序）上使用百分比设置控件宽高的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

概览

在这里插入图片描述
运行到微信小程序，注意下，在浏览器查看的时候，是没有状态栏的

尺寸

可以参考

举例：

  1. 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
  2. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
  3. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

我们的设计图宽为1080，那么一个控件宽度为100px，那么就应该使用 750*100 / 1080 约为69rpx。
我们后面选择使用百分比的话，字体可以使用这个计算方式

控件宽高百分比设置

在web中
高度直接设置100%无效

百分比在uni-app中的使用（page）

参考

这是网络提供的一种方式，其实有一种最简单的方式，就是在每一个页面中，

如果使用具体值

既然uni-app说自己的尺寸，upx或者rpx是会根据屏幕尺寸自动适应的，他们的标准设计图又是750px的，我们可以写根布局尺寸为750rpx，1350rpx，让它们自动适应

但是在浏览器中查看的时候，选择iphoneX型号，纵向填充不满，这个应该方式是不考虑的

选择（web和小程序）

注意，因为运行到浏览器有uni-page-body标签，而运行到小程序是没有的：
在这里插入图片描述
所以，如果在引入uni-page-body设置是无效，不管是在app.vue还是在各自的page设置这个标签，在小程序的时候都是无效的。

所以用uni-page-body标签不适配小程序
使用具体值不匹配特殊尺寸屏幕

还是使用page，经测试，在APP上也适配

在每个页面中使用page，小程序不需要再配置；如果在App.vue中配置，
那么应该在小程序的app.wxss中也进行配置
uniapp｜实现多终端聊天对话组件、表情选择、消息发送
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
05-08 1万+
基于UniApp框架，实现跨平台多终端适配的聊天对话组件开发、表情选择交互设计及消息发送，支持文本与表情混合渲染。
uniapp的适配方式
最新发布
Bruce__taotao的博客
05-18 1005
文章摘要： uni-app 在适配多终端屏幕方面表现出色，通过统一的 rpx 单位（响应式像素）实现一套代码在 App、小程序、H5 等平台上的视觉一致性。rpx 根据屏幕宽度自动缩放，编译时转换为各平台的对应单位，如微信小程序的 rpx、H5 的 vw 和 App 的 px。默认设计稿以 750px 宽度为基准，开发者无需手动处理媒体查询或 DPR 缩放。uni-app 还解决了字体缩放、底部安全区、刘海屏等特殊平台的适配问题，提供多端兼容性支持。调试时建议使用 750px 设计稿，并避免使用 px 单位
微信小程序自定义导航栏高度适配
JandyPam的博客
07-11 1196
小程序自定义导航栏，兼容适配所有机型
uni-app 尺寸upx px rpx【4】
qq_48079316的博客
08-08 558
【代码】uni-app 尺寸upx px rpx【4】
Uniapp项目 适配不同机型大小尺寸 包括设计稿非750px
m0_53789333的博客
08-27 3337
通过将设计稿中的px值转换为rpx值，你可以确保你的应用在不同屏幕尺寸上都能正确显示。使用上述方法，你可以根据设计稿的尺寸进行相应的转换，从而实现适配。
学习笔记（3）uni-app开发之 尺寸单位、Flex布局与背景图片
一个平凡的技术热爱者
04-27 3330
Flex用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box {} .box {采用FLex布局的元素称为Flex容器（flex container），简称容器，如图所示：容器默认存在两条轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）.主轴开始位置（与边框的交叉点）成为main start，结束的位置称为main end；交叉轴的开始位置称为cross start，结束位置已称为cross end。项目默认沿主轴排列。
uni-app快速入门（六）--rpx尺寸单位与Flex布局
baozhengw的专栏
11-17 1488
本文介绍 uni-app 使用的rpx像素以及屏幕像素与rpx像素的换算、以及uni-app中的flex布局，包括容器布局和项目布局（容器内元素的布局）的属性说明。对于全栈开发人员来说，掌握这些内容可以更快地帮助我们读懂前端页面的代码。
uniapp聊天应用源代码
08-10
【uniapp聊天应用源代码】是一款基于uni-app框架开发的聊天应用程序。uni-app是一个使用Vue.js开发所有平台的跨端框架，它允许开发者编写一次代码，就能在iOS、Android、Web（h5）、微信小程序、支付宝小程序、百度...
uniapp横竖屏适配实战：自适应布局的黄金法则
![uniapp横竖屏适配实战：自适应布局的黄金法则]...本章将概述uniapp横竖屏适配的重要性，并且介绍后续章节将深入探讨的几
uniapp-小程序，基于Uview搭建的一个小程序框架
11-27
此外，由于uniapp开发的小程序还可以编译到多个平台，设计时也要考虑到不同平台可能存在的差异性，进行相应的适配工作，保证应用在不同平台上的表现一致性和性能表现。 在实际开发过程中，设计文档的编写、版本控制...
uniapp横竖屏适配大揭秘：提升用户体验的7个关键步骤
uniapp横竖屏适配概述 移动应用开发中，横竖屏适配是提升用户体验的关键因素之一。随着智能手机的普及，用户在使用应用时对界面显示的适应性和舒适性有着更高的要求。uniapp作为一个跨平台的前端开发框架，提供了...
uni-app 微信小程序适配
紫竺的博客
07-13 2137
1、upx、rpx、vw、vh、px的转换 1.vw：1vw等于视口宽度的1%。 100vw等于窗口的宽度 2.vh：1vh等于视口高度的1%。 100vh等于窗口的高度 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 (1)动态绑定的style不支持直接使用upx <!-- - 静态upx赋值生效 --> <view class="test" style="width:200upx"></view&g...
uni-app 笔记
u010822903的博客
11-30 870
view相当于div，但是不能用divrpx在不同的屏幕下有适应效果rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app规定屏幕基准宽度 750rpx。
uni-app 高度自适应
鹿蹊zz的博客
09-16 2123
原文链接：https://blog.youkuaiyun.com/weixin_45326286/article/details/105701468。版权声明：本文为优快云博主「Joey3193」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。**注意 scrollH 初始值不等大于最终显示的高度，如果封装组件，onReady () **// 获取可视区域高度，减去固定高度。以上微信小程序测试成功，其他未测试，如有问题请留言。方法二 动态获取固定高度。
小程序uniapp获取不同设备信息，与导航栏高度适配，盒子高度，scroll-view滚动
L123456llljdjdbd的博客
08-30 1093
小程序uniapp获取不同设备信息，与导航栏高度适配
关于uniapp自定义标题栏，高度自适应对齐方案解决
shuai1999m的博客
03-06 1828
uniapp多端开发，自定义标题状态栏高度问题解决方案
关于uniapp中屏幕尺寸超过750配置，详解
m0_71311743的博客
11-06 2700
然后我们接着去蓝狐设置页面为自定义尺寸，调成750即可，（在uniapp中750意味着横屏满屏）当我们在开发中如果页面尺寸过大，会出现rpx适配失效，因此我们需要在pages.json中设置。
uniapp 设置重写uni-body-page样式，输入字母转大写，条形码扫描
low666的博客
11-13 1168
uniapp 设置重写uni-body-page样式，输入字母转大写
uniapp 文件
03-27
### 创建 UniApp 项目的流程 创建一个新的 UniApp 项目可以通过命令行工具完成。具体来说，可以使用 `vue create` 命令并指定预设模板来初始化项目[^1]。 ```bash vue create -p dcloudio/uni-preset-vue my-uniapp ``` 此命令会基于 DCloud 提供的官方模板生成一个全新的 UniApp 项目结构。完成后即可进入项目目录进行开发环境配置和其他依赖项的安装。 --- ### 安装 Axios 并集成到 UniApp 中 为了在网络请求中更高效地管理和发送 HTTP 请求，在 UniApp 项目中通常推荐引入 Axios 库作为解决方案之一。Axios 支持 Promise API 和拦截器功能，能够很好地适配跨平台需求。 以下是安装 Axios 的基本步骤： ```bash npm install axios --save ``` 接着可以在页面或者公用服务层导入 Axios 来发起网络请求： ```javascript import axios from 'axios'; export function fetchData() { return axios.get('https://example.com/api/data') .then(response => response.data) .catch(error => console.error('Error:', error)); } ``` --- ### 获取设备信息的方法 对于需要动态获取运行时设备硬件特性的情况，比如机型名称和操作系统版本号等基本信息，可通过原生插件接口调用来实现。下面是一个 Android 环境下的 Java 实现案例[^2]： ```java public void getDeviceInfo(UniJSCallback callback) { JSONObject deviceInfo = new JSONObject(); try { String model = android.os.Build.MODEL; String version = android.os.Build.VERSION.RELEASE; deviceInfo.put("model", model); deviceInfo.put("version", version); if (callback != null && !callback.isInvokeFailed()) { callback.invoke(deviceInfo.toString()); } } catch (JSONException e) { e.printStackTrace(); } } ``` 该函数将收集的数据序列化为 JSON 字符串形式并通过回调传递至前端逻辑处理部分。 --- ### 自定义 H5 打包后的配置调整 当 UniApp 应用被打包成 HTML5 版本部署上线时，可能面临一些特定场景的需求变化（例如更换服务器地址）。此时就需要一种机制允许外部修改默认设置而无需重新编译整个工程[^3]。 针对这种情况，开源社区提供了专门解决此类问题的技术方案——即通过读取远程存储中的 JSON 文件或者其他轻量级数据库记录来自动生成最终生效的应用参数集合。更多细节可以从以下链接找到实际操作指导文档： [https://gitcode.com/open-source-toolkit/20764](https://gitcode.com/open-source-toolkit/20764) --- ### hello-uniapp 示例项目解析 作为一个入门级别的学习资料，“hello-uniapp” 展示了如何构建基础架构以及常见交互效果的设计思路[^4]。它涵盖了从界面布局设计、状态管理再到多端兼容测试全流程的最佳实践要点。 主要技术栈包括但不限于： - **Vue.js**: 负责视图渲染与事件绑定； - **CSS3 / Flexbox Layouts**: 构建响应式 UI 组件样式表规则集； - **JavaScript ES6+ Features**: 利用现代化语法简化编码复杂度； 同时支持一键分发至主流移动客户端及 Web 浏览器终端上无缝衔接体验一致性表现水平之上！ --- ### 关于组件复用注意事项 考虑到不同团队之间协作效率最大化考量因素下，合理规划公共资源库显得尤为重要。一般而言简单的独立型控件可以直接迁移过来继续沿用原有属性定义方式不变前提条件下仅需简单替换尺寸单位标准由固定像素(px)转为相对比例(rpx/upx)[^5]。 而对于那些高度依赖第三方扩展库才能正常工作的部件，则应该遵循其官方说明文档指示逐步完成本地化移植过程直至完全脱离原始宿主环境约束为止。 --- ####
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值