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

 

移動web中設計尺寸與製作尺寸詳解