前端朔源:像素

前端朔源:像素

设备需要适配多屏幕进行开发,第一个问题初始化像素。像素分为两种:

1. 当前显示设备的物理像素分辨率 单位 pt

2. CSS像素分辨率 单位 px

3. 设备独立像素:随着技术发展,设备不断更新,出现了不同PPI的屏幕共存的状态(如iPhone3G/S为163PPI,iPhone4/S为326PPI),像素不再是统一的度量单位,这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。

在Web开发中可以使用px(像素)、empt(点)、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.

 

上一篇:移动端屏幕适配的几种方法


下一篇:小C的历是