文档介绍：手机屏幕自适应 方法的讲解
1
目录
一
认识手机屏幕分辨率及屏幕密度
二
css单位px,em和rem的含义
三
常见的几种手机页面自适应方法
2
认识手机屏幕分辨率及屏幕密度
一
3
1. 认识手机屏幕分辨率
手机屏幕分辨率是手机的重要参数之一，是屏幕上显示像素个数的多少，以水平和垂直像素来衡量的。比如分辨率1024*768，其中的1024表示屏幕上水平方向显示的像素点数，768表示垂直方向的像素点数。
屏幕分辨率与屏幕大小是两个不同概念，，，是指屏幕对角线的长度。就屏幕显示来说，屏幕分辨率与屏幕大小还是存在一定的关系的，相同屏幕大小的手机，屏幕分辨率越大，屏幕显示就也清晰。
4
2. 手机屏幕分辨率有哪些
5
3. 主要的5种屏幕分辨率
VGA ( Video Graphics Array )： 是指分辨率为 640 * 480 ，由此可以看出纵横显示比是 4:3，这个最早是电脑屏幕和电视屏幕的标准。
QVGA （Quarter VGA）： 这是四分之一的VGA。不过，注意是面积的四分之一。因此，QVGA 的分辨率就是长宽各是 VGA 的一半，也就是 320 * 240 ，纵横比仍然是4:3。
HVGA （ Half-size VGA）： VGA的一半，还是面积的一半，也就是一边为一半，另一边不变。因此分辨率为 320 * 480 （或者 480 * 320），纵横比为3:2。
WVGA （Wide VGA）：VGA加宽了。分辨率 800 * 480，纵横比为5:3。
FWVGA（Full WVGA）：而目前Milestone等手机采用的 FWVGA（Full WVGA）则更宽一些，达到 854 * 480，纵横比接近16:9 。这样的显示主要是为适应当前智能手机终端浏览网页所需。
6
4. 什么是屏幕密度
PPI：Pixels Per Inch（pixel：像素，per：每个、单独的，inch：英寸），也就是每英寸长度里包含的像素点个数。这一指标代表了手机屏幕的像素密度，像素密度越高的屏幕一定程度看上去也就越细腻
PPI计算是有固定方法的，我们以OTO ME860手机为例：它的屏幕分辨率为960 × 540，；首先，，那么根据以对角线为斜边的勾股定理：长^2 + 宽^2 = 斜边^2（x^2代表x的平方），那么根据各边对应的比例可以分别计算出屏幕长和宽的英寸数。根据分辨率比为16:9，然后16^2 + 9^2 = 337，所以：
屏幕长 = (4 ÷ Sqrt (337) ) × 16 = (英寸)
屏幕宽 = (4 ÷ Sqrt (337) ) × 9 = (英寸)
纵向PPI = 960 ÷ = ≈ 275
横向PPI = 540 ÷ = ≈ 275
7
css单位px,em和rem的含义
二
8
1. 认识PX（像素）
px就是css中最基本的相对长度单位，它是相对于显示器屏幕分辨率而言的。
优点：比较稳定和精确
缺点：在浏览器无法调整以px为单位的字体大小，所以在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。
9
2. 认识CSS单位em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。为了计算方便，一般会在body选择器中声明Font-size=%，这就使em值变为 16px*%=10px, 这样12px=, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
特点：em的值并不是固定的，同时会继承父级元素的字体大小。
10