APP适配问题

本文详细介绍如何通过REM单位实现网页的响应式设计,包括设计稿尺寸转换为REM值的方法,动态调整html字体大小的JS代码,以及HBuilder中设置REM转换的步骤。

用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转化关系,

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值