移動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。