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

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

 


版权声明:本文为weixin_39528587原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。