微信小程序设计尺寸

embedded/2024/10/20 14:47:22/

小程序>微信小程序的设计尺寸规范主要基于‌rpx单位,规定屏幕宽度为750rpx。‌ 在设计小程序>微信小程序时,设计师通常以‌iPhone 6的屏幕尺寸(375px)作为基准,因为1rpx等于0.5px,即1rpx等于1物理像素。这意味着在设计稿上测量的尺寸可以直接转换为rpx单位,无需进行复杂的计算。例如,如果设计稿上的元素宽度为375px,那么在小程序>微信小程序中应写为750rpx。‌12

此外,小程序>微信小程序也支持‌rem单位,规定屏幕宽度为20rem,这意味着1rem等于(750/20)rpx,即37.5rpx。这种灵活性使得开发者可以根据不同的设计需求选择使用rpx或rem单位。

对于非iPhone 6的设计稿,如iPhone 5(屏幕尺寸为320px),设计师需要使用calc()函数来计算rpx值。例如,如果一个元素在设计稿上的宽度为320px,那么在小程序>微信小程序中应写为calc(320 / 320 * 750rpx)。

‌状态导航栏的尺寸规范也是设计小程序>微信小程序时需要考虑的重要因素。状态导航栏通常位于页面顶部,位于品牌Logo和标题之间。其高度通常在40px到60px之间,图标大小在20px到30px之间,文字大小在14px到20px之间。这些尺寸可以根据实际需求进行调整,但建议在多个页面中保持一致性,以增强用户体验。

也可以参考:小程序>微信小程序的设计规范developers.weixin.qq.com/miniprogram/design/#字体


http://www.ppmy.cn/embedded/129014.html

相关文章

Debug-029-el-table实现自动滚动分批请求数据

前情提要 最近做了一个小优化,还是关于展示大屏方面的。大屏中使用el-table展示列表数据,最初的方案是将数据全部返回,确实随着数据变多有性能问题,有时请求时间比较长。这里做的优化就是实现列表的滚动到距离底部一定高度时再次请…

UDP协议和TCP协议

UDP协议: 是一种无连接的、简单的传输层通信协议,它在IP协议(网络层)之上提供服务。 特点: 无连接:在数据传输前,发送方和接收方之间不需要建立连接,可以直接发送数据。 简单&…

读数据工程之道:设计和构建健壮的数据系统14源系统

1. 源系统中的数据生成 1.1. 数据工程师的工作是从源系统获取数据,对其进行处理,使其有助于为下游用例提供服务 1.2. 数据工程师的角色将在很大程度上转向理解数据源和目的地之间的相互作用 1.3. 数据工程的最基本的数据管道任务——将数据从A移动到B…

Threejs 实现3D 地图(01)创建基本场景

"d3": "^7.9.0", "three": "^0.169.0", "vue": "^3.5.10" <script setup> import { onMounted,ref } from vue import * as THREE from three import * as d3 from "d3"; //莫开托坐标 矫正地图…

Mybatis-plus

Springboot3Mybatis3.5 基本框架环境依赖导入配置文件实体类业务类结构 基本功能——提供的mapper接口及实现插入删除——返回受影响行数修改数据查询方法自定义mapper&#xff08;和mybatis一样&#xff09; 相关功能——提供的Service方法Service层搭建相关方法添加记录插入或…

SpringCloud第三章:客户端负载均衡与服务调用

正常本章节应该讲解Netflix Ribbon&#xff0c;由于从Netflix Eureka Client 3.0版本开始内置Ribbon实现机制&#xff0c;不需要单独依赖Ribbon&#xff0c;如果引入Ribbon会报错 java.lang.IllegalStateException: No instances available for XXXXXX&#xff0c;并且想要修改…

1/2∥w∥^2 :这是w 的二次项,偏导数为 w

此公式出现在线性可分支持向量机基于拉格朗日函数L(w,b,α)对w求导的公式中。为什么 1 2 ∥ w ∥ 2 \frac{1}{2} \|\mathbf{w}\|^2 21​∥w∥2 对 w \mathbf{w} w 的偏导数是 w \mathbf{w} w。这个问题涉及到向量的微分运算。 1. 复习&#xff1a;向量的范数 我们首先来看…

DBdoctor推出无Agent轻量级纳管解决方案

目录 背景 DBdoctor推出无Agent轻量级纳管解决方案 方案优势&#xff1a; 实例纳管方式&#xff1a; 无Agent纳管可体验哪些功能&#xff1f; 1.全量SQL审核功能 2.实例巡检功能 3.性能洞察功能 4.基础监控功能 总结 背景 在数字化时代&#xff0c;数据库作为信息系…