布局适配

布局适配

多分辨率布局

手机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>

这种方式,页面的布局会根据屏幕分辨率进行自动适配。

像素不是像素,对像素,视窗的的深层次解读

上篇文章的中文翻译

苹果ios safari对viewport的解释和对Meta的支持

阿里的终端适配

原文地址:https://www.cnblogs.com/diaoxiong/p/5673710.html