设备需要适配多屏幕进行开发,第一个问题初始化像素。像素分为两种:
1. 当前显示设备的物理像素分辨率 单位 pt
2. CSS像素分辨率 单位 px
3. 设备独立像素:随着技术发展,设备不断更新,出现了不同PPI的屏幕共存的状态(如iPhone3G/S为163PPI,iPhone4/S为326PPI),像素不再是统一的度量单位,这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。
在Web开发中可以使用px
(像素)、em
、pt
(点)、in
(英寸)、cm
(厘米)做为长度单位,我们最常用px
(像素)做为长度单位。分辨率则一般用像素来度量 px
,表示屏幕水平和垂直方向的像素数,例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。
pt 同px是有一个对应(比例)关系的,这个对应(比例)关系是操作系统确定并处理,目的是确保不同PPI屏幕所能显示的图像大小是一致的,通过 window.devicePixelRatio
可以获得该比例值
window.devicePixelRatio
此值也可以解释为像素大小的比率,它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
dpr(像素设备比):dpr = window.devicePixelRatio = 物理像素 / 逻辑像素 = ppi /160
逻辑像素 = 物理像素 * dpr。
做CANVAS 需要定义这个关键参数
获取屏幕的物理像素尺寸:
宽:window.screen.width;
高:window.screen.height;
在PC设备上viewport的大小取决于浏览器窗口的大小,以CSS像素做为度量单位:
/* 获取viewport的大小 */
宽:document.documentElement.clientWidth;
高:document.documentElement.clientHeight;
<meta name="viewport" content="width=device-width, initital-scale=1.0, user-scalable=no">
width
:设置 layout viewport 宽度,其取值可为数值或者device-width。
height
:设置layout viewport 高度,其取值可为数值或者device-height
initital-scale
:设置页面的初始缩放值,为一个数字,可以带小数。
maximum-scale
:允许用户的最大缩放值,为一个数字,可以带小数。
minimum-scale
:允许用户的最小缩放值,为一个数字,可以带小数。
user-scalable
:是否允许用户进行缩放,值为"no"(不能缩放)或"yes"(可以缩放)。
屏幕适配
关于 em 和 rem 只影响字体
em 是相对长度单位(参照父元素),其参照当前元素字号大小,如果当前元素未设置字号则会继承其祖先元素字号大小。
例如:.box {font-size: 16px;}
则 1em = 16px
.box {font-size: 32px;}
则 1em = 32px,0.5em = 16px
rem 相对长度单位(参照 html 元素),其参照根元素(html)字号大小。
例如 :html {font-size: 16px;}
则 1rem = 16px
html {font-size: 32px;}
则 1rem = 32px,0.5rem = 16px.