布局适配
多分辨率布局
手机app开发中,目标设备特别多。设计师一般针对iphone 6的分辨率(750*1334)标准进行设计。可以利用REM这个单位进行布局。
REM是相对单位,相对HTML的font-size 大小。例如设置font-size=75.那么整个设计图就分为10份。
<html style="font-size:37.5px">
<meta name="viewport" content="width=device-width"/>
<body style="margin:0;">
<div style="5rem;height:1rem;background:red;float:left"></div>
<div style="5rem;height:1rem;background:green;float:right"></div>
<script>
var unit = window.innerWidth/10;
document.documentElement.style.fontSize = unit+'px';
</script>
</body>
</html>
这种方式,页面的布局会根据屏幕分辨率进行自动适配。