CSS 中的像素(px)

px 是一个我们经常在开发中使用的一个单元;
它表示在屏幕上展示的最小单元;

但是, 在 CSS 中像素可能和我们想象的不太一样.

CSS 中的 px 是逻辑距离还是物理距离

答: 是逻辑距离;

像素(pixel)在浏览器中是一个表示距离的绝对单位(absolute unit);
同时, 在 CSS 中它是一个相对像素 (reference pixel);

浏览器会根据设备像素比(devicePixelRatio), 来展示图像;
所以, 在 CSS 中 1px 可不一定对应真实在显示器上的 1px 哦!

例如: 在我屏幕分辨率是 2560 * 1600的 13 寸笔记本上;
网页展示的文本是 16px, 但是实际上物理上却是 32px;

可以看到, 浏览器中可用的宽高和实际的分辨率并不一致

其中有一个计算公式:

CSS Pixel = Device Pixels / Device Pixel Ratio

为什么要使用逻辑像素

答：适配不同的设备，让他们看起来更有一致性；

为什么要使用 2 倍图

因为: CSS 中的像素是逻辑像素; 是不是前后呼应了 😃

有时候, 设计师给我的图片会说要使用 2 倍图, 3 倍图;

这是因为有些设备的屏幕分辨率较高(例如 iPhone 手机, Retina 屏幕),
尽管我们在 css 中声明了宽高的像素值,
但是, 实际浏览器展示时就会放大 2 倍,3 倍; 此时就需要使用更加清晰的 2 倍图, 3 倍图了;

网页放大缩小是怎么做到的

答: 通过修改 devicePixelRatio

在 windows 下, 我们可以使用快捷键 Ctrl + + 来放大浏览器页面

我们可以放大后, 查看浏览器的devicePixelRatio
可以发现, 每次放大, 输出的值都会变化

// 在控制台中输入
window.devicePixelRatio;

为什么字体放大并不会模糊呢

因为字体是矢量图;

图片放大会模糊是因为图片一般是光栅图;
如果是 svg 放大是不会模糊的;

参考文章

• understanding-device-resolution-for-web-design-and-development
• 移动前端开发之 viewport 的深入理解
• pixels-pixels-and-more-pixels