移动web中设计尺寸与制作尺寸详解

如今所有移动设备的尺寸各异，对于移动web的响应式也是一个考验

以下是目前一些主流设备的尺寸大小：

 

上图所有设备中可以总结为：

设备	分辨率	web尺寸	倍率	meta label
iPhone4-4s	640×960px	320×480px	0.5	<meta content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no;" name="viewport">
iPhone5-5s-5c	640×1136px	320×568px	0.5	<meta content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no;" name="viewport">
iPhone6	750×1334px	375×667px	0.5	<meta content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no;" name="viewport">
iPhone6 plus	1242×2208px	414×736	0.3333333333333333	<meta content="width=device-width, initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, user-scalable=no;" name="viewport">
ipad mini	1024×768px	1024×768px	1	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport">
安卓设备	-	-	1	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport">

 

移动端字体大小html{font-size:62.5%;}

在其他元素中使用字体大小的时候，使用单位为rem ，转换为像素是的倍率是10，也就是说 设计图中的字体大小为25px，css中font-size为2.5rem。