本文想简单介绍一下CSS像素、物理像素、逻辑像素、设备像素比等概念，并记录一下自己对于网页在不同平台的不同设备中的显示效果以及处理逻辑的思考。

 

概念介绍

CSS像素

CSS像素，顾名思义其实就是在网页开发中，用于CSS样式和Javascript代码中的px单位，是一个相对单位，在不同显示设备中可能显示为不同的物理像素。

 

物理像素

物理像素，是指显示设备的实际像素数量，例如常见的1080p屏幕的物理像素为1920px*1080px。是一个绝对单位，只与设备本身有关。

 

逻辑像素

逻辑像素，是指网页在显示设备中显示时，显示的网页内容的CSS像素数量。它不是固定不变的，会随着网页的缩放而变化。

例如1080px宽度的屏幕显示1080px的网页时，100%的正常尺寸，逻辑像素为1080px；当网页放大到200%时，只能显示一半宽度的网页内容，此时逻辑像素为540px。

 

设备像素比

设备像素比是指默认情况下，显示设备的逻辑像素与物理像素的比值。

 

桌面端

在桌面端网页开发中，页面中设置的CSS像素尺寸（CSS像素），与设备实际显示像素（物理像素）是一一对应的，也就是说对于某一网页元素来说，在网页中设置的像素尺寸，与在不同显示器中显示的网页的像素尺寸是相同的（由于不同显示器的尺寸和分辨率不同以及人眼与屏幕距离不同，视觉尺寸是不同的）。

在使用4k显示器时，往往会发现有些网页特别窄，网页的图片和字体也都很小，不得不使用浏览器的放大功能来查看，可是放大后又变得很模糊。

这其实就是在开发中没有对超大屏幕做适配，网页宽度限制在了1000像素左右因此两侧会有超大的空隙。

为了解决这个问题，有些网页使用了bootstrap等响应式布局，能够主动根据浏览器宽度进行网页元素进行缩放；还有一些网页则是对同一元素设置不同的CSS样式，并通过媒体查询根据浏览器宽度自动调用对应的CSS样式。

 

移动端

而在移动端中，如果打开电脑版的网页，会发现文字和图片特别小，不方便查看和操作。这实际上是因为手机屏幕的实际宽度远比电脑显示器小，但是却有相近的分辨率，导致了更高的像素密度，因此文字和图片的视觉尺寸就会很小。

为了解决这个问题，在移动端中，往往会用2*2个甚至更多个像素显示原本1像素的内容。例如在iPhone4S中，一个设置为320px*480px的网页就可以把原本分辨率640px*960px的iPhone4s屏幕占满，可以理解为所有网页打开时默认进行了200%的缩放。

这样一来提高了实际尺寸，能够让使用者看得更清楚，但同时降低了设备的逻辑宽度。

这个时候CSS像素为320px*480px，物理像素为640px*960px，逻辑像素为320px*480px，设备像素比为1:2。

这个网页在iPhone4s上显示为640px*960px，设备像素比为1:2，但是在桌面端却显示为320px*480px，设备像素比为1:1。

而随着技术的发展，移动端屏幕的物理像素越来越高，2K屏甚至4K屏幕逐渐普及，设备像素比达到了1：3甚至1：4。

例如iPhoneX实际分辨率为1125px*2436px，但在1：3的设备像素比下，逻辑分辨率实际为414px*736px。

由于设备像素比，会导致绝大多数移动端的逻辑像素宽度低于1000px，这样一来显示桌面版电脑网页时就会有异常，前端开发人员一般有两种做法：最常用的是为移动端单独制作网页，在访问网站时检测到移动端时自动跳转；还有一种是使用Bootstrap等响应式布局，自动根据网页宽度调整布局宽度和显示内容。

 

倍图

对于文字和盒子等网页元素，移动端这样的放大显示是没有问题的，但是对于图片来说，放大会导致模糊，因此出现了倍图的概念，原理就是在制作网页上的图片时，生成出一套尺寸不同的图。

以iPhone为例，当需要一个30px*30px的图片时，需要向美工要求3个文件（可以使用Cutterman这个PS插件快速生成）：

  • 30px*30px的图片，命名为sample.png
  • 60px*60px的图片，命名为sample@2x.png
  • 90px*90px的图片，命名为sample@3x.png

当把这三张图片导入工程，就会发现它们会被iOS统一识别为sample.png。

其中第一张用于设备像素比1：1的屏幕，即非视网膜屏，例如iPhone3GS；第二张2X用于设备像素比1：2的屏幕，即视网膜屏（Retina），例如iPhone4S到iPhone6；第三张3X用于设备像素比1：3的屏幕，即更高实际分辨率的屏幕，例如iPhone6Plus等。

倍图的原理其实就是将一张大图设置为小的CSS尺寸，例如上面90px*90px的3X图，设置为30px*30px的CSS尺寸，这样在iPhoneX中打开就会放大为90px*90px的实际大小，也就解决了图片模糊的问题。

普通图片可以直接使用width和height属性设置宽高，而背景图片可以使用background-size属性设置宽高。

 

总结

所谓设备像素比，实际就是设置网页在设备中打开时的默认缩放倍数，对于4K桌面显示器以及高分辨率移动端来说，都可以通过这一技术获得更清晰的显示效果。

只不过移动端的发展更快速，由厂商预先设置好不同设备的设备像素比，大多数网站也主动进行适配，保证了用户的使用体验。

而桌面端用户绝大多数用的都是2K以内分辨率，因此考虑到兼容性，很多网站对于超大屏幕的适配不够完善。

 

这个世界如此美好，

值得人们为它奋斗。

我只同意后半句。

——欧内斯特·海明威