用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转化关系,
这里回车一下就转化好了。希望对你们有所帮助