绝对长度单位
英寸 | 厘米 | 毫米 | 磅 | pc |
---|---|---|---|---|
inch | cm | mm | pt | pica |
相对长度单位
是网页设计中使用最多的长度单位,包括px、em、rem
等
屏幕尺寸
指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米
iPhone 4/4S | iPhone 5/5C/5S/SE | iPhone 6/6S | iPhone 6S Plus | iPhone 7 | iPhone 7 Plus | iPhone 8 | iPhone 8 Plus | iPhone X |
---|---|---|---|---|---|---|---|---|
3.5英寸 | 4英寸 | 4.7英寸 | 5.5英寸 | 4.7英寸 | 5.5英寸 | 4.7英寸 | 5.5英寸 | 5.8英寸 |
屏幕分辨率
指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素
来表示一个手机的分辨率,如1960*1080(这里的1像素指的是物理设备的1个像素点)
机型 | 分辨率 | 机型 | 分辨率 | 机型 | 分辨率 |
---|---|---|---|---|---|
iPhone 4/4S | 960*640 | iPhone 6S Plus | 1920*1080 | iPhone 8 Plus | 1920*1080 |
iPhone 5/5S | 1136*640 | iPhone 7 | 1334*750 | iPhone X | 2436*1125 |
iPhone SE | 1136*640 | iPhone 7 Plus | 1920*1080 | ||
iPhone 6/6S | 1334*750 | iPhone 8 | 1334*750 |
屏幕像素密度
屏幕上每英寸可以显示的像素点的数量,单位是ppi,即pixels per inch的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小
- 屏幕上勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px
- 对角线分辨率除以屏幕尺寸:2203/5≈440dpi
1920^2 + 1080^2 ≈ 2203^2 //3686400 + 1166400 = 4852800
2203 / 5 ≈ 440
PPI与DPI
PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目
PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱
ppi与dpi | 描述 |
---|---|
ppi | pixels per inch ,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度 |
dpi | dots per inch ,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi |
Viewport
移动端开发中,通常我们都会采用meta
标签设置viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">