uniapp尺寸适配的一些记录
文章目录
- 概览
- 尺寸
- 控件宽高百分比设置
- 百分比在uni-app中的使用（page）
- 如果使用具体值
- 选择（web和小程序）
概览
运行到微信小程序，注意下，在浏览器查看的时候，是没有状态栏的
尺寸
可以参考
举例：
- 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
- 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
- 若设计稿宽度为 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尺寸适配的一些记录相关推荐
- uniapp页面适配平板和手机
一.移动端优先 一般建议直接给出750px的手机设计稿,通过rpx等比缩放.这里需要注意的是uniapp默认适配的最大屏幕宽度为960px,超过这个范围rpx将不生效,而某些平板的尺寸比如ipad p ...
- 轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言 从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
- 安卓开发屏幕分辨率尺寸适配问题【原创】
2019独角兽企业重金招聘Python工程师标准>>> 屏幕分辨率尺寸适配是安卓开发中的难题之一,我开发中的解决办法是: 1.多使用相对布局,即RelativeLayout,或者Li ...
- Andriod界面设计的分辨率和尺寸适配全攻略 转载
Andriod界面设计的分辨率和尺寸适配全攻略 转载 2016年09月27日 17:45:56 第一.屏幕尺寸: 一般表示是手机的实际物理尺寸,屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.5 ...
- Android屏幕尺寸适配常见方案smallestWidth
前言 介于目前的Android设备存在有不同的屏幕尺寸,屏幕分辨率,像素密度,Android应用在开发的过程必须要考虑到屏幕尺寸适配的问题,以保证在不同尺寸的Android设备上都能够正常运行. 基本 ...
- 关于android屏幕尺寸适配的整理以及思考
一直以来android屏幕尺寸相关的东西我都很薄弱,什么dpi, ppi, 英寸我都比较疑惑,本文主要是理清概念,理解头条的屏幕适配原理,以为目前我工作是如何做UI适配的. 一些基础概念 屏幕尺寸 屏 ...
- uniapp尺寸单位 px转rpx
uniapp尺寸单位 uni-app 支持的通用 css 单位 包括 px.rpx px即屏幕像素 rpx即响应式px,一种根据屏幕宽度自适应的动态单位.以750宽的屏幕为基准,750rpx恰好为屏幕 ...
- crmeb知识付费uniapp重构 适配小程序 APP 微信H5
uniapp重构crmeb知识付费 适配小程序 APP wxh5 前端首页 前端首页顶部banner图可在后台[系统设置>首页设置>首页轮播图]中更换:图片尺寸:750*365 px 首页 ...
- Android屏幕尺寸适配注意事项
1 基本设置 1.1 AndroidManifest.xml设置 在<manifest>中添加子元素<supports-screens android:largeS ...
最新文章
- shell MAC 地址 校验
- 每日程序C语言23-求一个正整数的位数并逆序打印
- JAVA基本数据类型、数据类型转换
- java 缓存分页_基于redis做缓存分页
- idea如何安装lombok
- 2018.03.12、Android知识点-Java篇
- 批量反编译Andorid工程中的XML文件
- 路由器性能测试工具_小米路由器AX3600与AX1800 MESH 实测
- linux创建tcp命令是,linux – 为tcpdump捕获创建多播联接
- poj 1719 Shooting Contest 二分匹配
- 多维数据查询效率分析（2）
- 第 7 章 Neutron - 079 - 在 ML2 中 enable local network
- 黄金价格查询易语言代码
- 基于单片机的智能饮水机控制系统设计（毕业设计资料）
- 【学习体会】Lighttools8.4.0：简单光学系统实例
- android 自启动权限,引导用户开启开机自启动权限
- 紫外线杀菌器:紫外线杀菌的原理分析
- JAVA高级工程师笔试面试题
- Element-UI checkbox 如何改造成只可单项选择
- 毕业设计 基于JSP动漫论坛的设计与实现