[html5]前端一定要知道的关于手机界面的知识点viewport

刚开始接触移动页面重构，是不是很迷惑应该按照多大的尺寸制作?320、640还是720?按照640的设计稿重构完页面，是不是还需要写其他尺寸来适配不同的屏幕大小?——这源于对viewport和px的不了解。

已经重构了好多移动页面，但是对为什么要按照640的大小来设计页面，不清楚答案。给元素赋予固定的像素值，但是奇怪的是在不同的手机里看起来都差不多大小，不需要另外去适配，真是太爽了。为什么?不知道耶。——这源于对viewport和px的不了解。

=================我是酷酷的分割线==================

先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位：

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

接下来分类给大家介绍下：

① 什么是绝对长度单位?什么是相对长度单位?

② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?

③ 什么是ppi、dpi、dp、dip、sp、px?他们之间的关系是什么?

④ 什么是mdpi、hdpi、xdpi、xxdpi?如何计算和区分?

1、什么是绝对长度单位?什么是相对长度单位?

绝对长度单位：in(inch英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)。in、cm、mm和实际中的常用单位完全相同。pt是标准印刷上常用的单位，72pt的长度为1英寸。pc也是印刷上用的单位，1pc的长度为12磅。绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。所以我们就忽略它们吧。

相对长度单位：是网页设计中使用最多的长度单位，包括px、em、rem等。

2、什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?

屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。(这里的1像素值得是物理设备的1个像素点)

屏幕像素密度：屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

最明显的就是iPhone 3GS和iPhone 4的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。