移动web学习笔记

Posted 2020-08-14

pixel像素基础：

像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。

px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；

pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；

em：即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性;

PPI（DPI）：pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度”。

分类：

实际上像素分为两种：设备像素和CSS像素

　　1、设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的

　　2、CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层

　　每一个CSS声明和几乎所有的javascript属性都使用CSS像素，因此实际上从来用不上设备像素 ，唯一的例外是screen.width/height

缩放：

在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。

而在手机端，由于屏幕尺寸的限制，缩放是经常性的操作。

不论我们进行缩小或放大操作，元素设置的CSS像素(如width:300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的。

设备像素绽放比DPR(devicePixelRatio)：

DPR = 设备像素 / CSS像素(某一方向上)

设备像素比DPR对应的javascript属性window.devicePixelRatio

以iphone5为例，iphone5的CSS像素为320px*568px，DPR是2，所以其设备像素为640px*1136px

    640(px) / 320(px)  = 2
    1136(px) / 568(px) = 2
    640(px)*1136(px) /  320(px)*568(px) = 4

ppi和其计算方法：

PPI：pixels per inch即每英寸所拥有的像素数。

计算方法很简单，用长跟高的像素数计算出对角方向的像素数（直角三角形），然后再用对角的像素数除以屏幕尺寸就是ppi了
公式表达为 PPI=√（X^2+Y^2）/ Z （X：长度像素数；Y：宽度像素数；Z：屏幕大小）。