media-像素与屏幕

Ios尺寸表

media-像素与屏幕_第1张图片

1、 piexl 像素知识

逻辑像素与物理像素的关系

px逻辑像素:浏览器使用的抽象单位

dp,pt物理像素:设备无关像素

dpr:设备像素缩放比

计算公式:1px = (dpr)^2 * dp

iphone5的 dpr = 2;

DPI:打印机每英寸可以喷的墨汁点(印刷行业)

PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度

目前,在计算机显示设备参数描述上,二者意思一致

计算公式:以iphone5为例:ppi = √(1136^2 + 640^2)/4 = 326ppi(视网膜retina屏)

注意:单位为硬件像素(物理像素),非px

PPI越高,像素数越高,图像越清晰。但可视度月低(小),系统默认缩放比越大。

retina屏(高清屏):dpr都是>=2。


2、设备像素比dpr(devicePixelRatio)

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

window.devicePixelRatio =物理像素/ dips

3、viewport

手机浏览器默认为我们做了两件事情:

① 页面渲染在一个980px(ios)的viewport

② 缩放


为什么要有viewport?

一个300多像素的屏幕,放一个1000多像素的页面,会混乱,所以要先虚拟一个980像素的页面,然后进行缩放。

度量|视口 visual viewport ==== 窗口缩放scale

布局layout viewport

设计移动web,为什么不使用默认的980px的布局viewport?

① 宽度不可控制,不同系统的设备默认值都可能不同

② 页面缩小版显示,交互不友好

③ 链接不可点

④ 有缩放,缩放后又有滚动

font-size为40px等于pc上12px同等物理大小,不规范

你可能感兴趣的:(media-像素与屏幕)