APP适配问题

用rem处理适配

1,设计稿的尺寸需要转化为rem值,分为若干份,没一份的大小就是rem,一般分为20来计算

2,把设计图测量出来的尺寸转化为rem值   比如:设计稿中一张图片是200px*200px

这里换成rem是:设计稿是640px    640/20=32rem,200/32rem就是图片的rem值了

3,在不同的设备中我们只需要去动态的设置html的font-size=设置宽度/20

4,这里动态的改变html中的font-size我们用js写,媒体查询比较麻烦

<script type="text/javascript">
       window.onresize=function(){
       	document.querySelector('html').style.fontSize=window.screen.width/20+'px';
       }
   		onresize();
</script>

这里要放在body的上面

Hbuilder设置rem转化步骤:

在菜单栏->工具->选项下面的HBuilder->代码助手设置 

这里用的是640px设置的   更具设计稿来设置rem转化关系,

这里回车一下就转化好了。希望对你们有所帮助

 

你好!对于uni-app适配和兼容问题,我可以给你一些建议。 首先,uni-app是基于Vue.js框架的跨平台开发框架,它可以同时开发小程序、H5、以及APP等多个平台。在适配方面,uni-app已经做了很多工作,使得开发者可以方便地编写一套代码,同时在不同平台上运行。但是仍然可能会遇到一些兼容性问题。 一些常见的适配和兼容问题包括: 1. 样式适配:不同平台的样式表现可能存在差异。你可以使用uni-app提供的`class`和`style`全局样式,根据不同平台设置不同的样式。 2. 组件适配:某些组件在小程序和H5平台上可能有不同的实现方式。你可以使用条件编译指令`<!-- #ifdef H5 -->`和`<!-- #ifndef H5 -->`来针对不同平台编写特定代码。 3. API适配:不同平台的API调用方式可能不同。你可以使用uni-app提供的内置API来实现跨平台兼容,或者使用条件编译指令来根据不同平台调用特定的API。 4. 图片适配:不同平台对图片格式和路径的要求可能不同。你可以使用uni-app提供的`@/static`路径来引用静态资源,并根据平台要求提供不同的格式。 5. 第三方插件兼容:某些第三方插件可能不支持所有平台。你可以在使用前检查插件文档,确认其支持的平台,并在不支持的平台上进行兼容处理。 总之,针对uni-app适配和兼容问题,你可以通过使用uni-app提供的工具和特性,以及条件编译指令来进行处理。同时,建议在开发前了解各个平台的差异和要求,并在实际开发中进行测试和调试,以确保应用在不同平台上的正常运行。希望这些建议对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值